jQuery效果

编辑本博客

显示效果

show(speed,callback)

  • speed：三种预定义字符串之一（slow，normal，fast）或时间“毫秒”
  • callback：动画执行完后运行的函数，每个元素执行一次

hide(speed,callback)

  • 与show()方法类似

toggle(speed,callback)

  • 如果元素可见，切换为隐藏。如果隐藏，切换为可见
  • speed为执行时间
  • callback为回调元素，只执行一

slide效果

slideDown()

  • 通过高度变化（向下增大）来达到动态地显示所有匹配的元素，在显示完成后触发一个回调函数

slideUp()

  • 通过高度变化（向上减少）来达到动态地隐藏所有匹配的元素，在隐藏完成后触发一个回调函数

sildeToggle()

  • 通过高度变化，来切换所匹配元素的可见性，并在切换完成之后触发一个回调函数

fade效果

fadeIn

  • 通过对透明元素调整透明度的变化来达到淡入效果，在动画执行完成后执行回调函数，只调整透明度

fadeOut

  • 通过对不透明元素调整透明度的变化来达到淡出效果，在动画执行完成后执行回调函数，只调整透明度

fadeTo

  •  把匹配到的元素的透明度以渐进的方式调整到指定的透明度，并在动画完成后执行回调函数

fadeToggle

  • 通过不透明的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后执行回调函数。实现淡入淡出的效果就用此方法。只调整透明度，不调整宽和高

 动画

animate(params,speed,fn)

  • params：一组包含作为动画属性和终止的样式属性及其值的集合
  • speed：三种预定义速度之一的字符串（'slow','normal','fast'）或动画时长毫秒数值
  • fn：在动画完成后的函数，每个回调只执行一次

链式执行动画，多个animate连续执行

<script type="text/javascript">
    $(function () {
        $("#btn").click(function () {
            $("#box").animate({
                width:"200px",
                height:"200px",
                top:"135px",
                left:"100px"
            },1000).animate({
                width:"100px",
                height:"100px",
                top:"35px",
                left:"0px"
            },1000)
        })
    })
</script>
View Code

stop：停止所有在指定元素上进行的动画

  • clearQueue:True则清空队列，可以立即结束动画
  • gotoEnd：让当前正在执行的动画立即完成，重设show和hide原始样式，调用回调函数等

暂停动画执行

<script type="text/javascript">
    $(function () {
        $("#str").click(function () {
            $("#box").animate({top:"135px",left:"100px"},5000);
        })
        $("#stop").click(function () {
            $("#box").stop();
        })
    })
</script>
View Code

delay：用来做延迟操作

  • delay(1000)，一秒之后所做的操作

第一个动画执行完毕后，暂停3秒后，继续执行

<script type="text/javascript">
    $(function () {
        $("#str").click(function () {
          $("#box").animate({width:"200px",height:"200px",top:"135px",left:"100px"},5000).delay(3000).animate({top:"35px",left:"0px"},2000);
        })
    })
</script>
View Code

演示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <script src="js/jquery-3.3.1.js"></script>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            width: 100px;
            height: 100px;
            border: 1px solid green;
            background-color: seagreen;
            position: absolute;/*就可设置top和left值*/
            line-height: 100px;
            top: 35px;
            text-align: center;
        }
    </style>
</head>
<body>
<button id="str">动</button>
<button id="stop">停</button>
<div id="box">
    Hello！
</div>

</body>
<script type="text/javascript">
    $(function () {
        $("#str").click(function () {
            /*$("#box").animate({
                width:"200px",
                height:"200px",
                top:"135px",
                left:"100px"
            },1000).animate({
                width:"100px",
                height:"100px",
                top:"35px",
                left:"0px"
            },1000)*/
            $("#box").animate({width:"200px",height:"200px",top:"135px",left:"100px"},5000).delay(3000).animate({top:"35px",left:"0px"},2000);
        })
        /*$("#stop").click(function () {
            $("#box").stop();
        })*/
    })
</script>
</html>
View Code

 小广告案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery属性操作</title>
    <script src="js/jquery-3.3.1.js"></script>
    <style type="text/css">
        #box{
            width: 300px;
            height: 240px;
            position: absolute;
            right: 10px;
            bottom: 10px;
            display: none;
        }
        img{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="box">
        <img src="img/advertising.jpg"/>
    </div>
</body>
<script type="text/javascript">
    $(function () {
        $("#box").slideDown("normal").slideUp("flast").fadeIn(1000).click(function () {
            $(this).fadeOut(1000)
        })
    })
</script>
</html>
View Code

 

posted @ 2018-06-18 19:18  丫丫625202  阅读(132)  评论(0)  编辑  收藏  举报