jQuery中的自定义动画效果

1.定义和用法

　　创建动画：

　　　　animate(params,[speed],[callback])

　　　　参数：

　　　　　　paramas：表示一个包含属性和值的映射，可以同时包含多个属性，例如{left:"200px",top:"100px"}

　　　　　　speed：表示动画运行的适度，参数规则同其他动画效果的speed一致，它是一个可选参数

　　　　　　callback：表示一个回调函数，当动画效果运行完毕后执行该回调函数，它也是一个可选参数

　　注意：

　　　　1.在使用animate()方法时，必须设置元素的定位属性position为relative或absolute，元素才能动起来。如果没有明确定义元素的定位属性，并试图使用animate()方法移动元素时，他们只会静止不动

　　　　2.在animate()方法中可以使用属性opacity来设置元素的透明度

　　　　3.如果在{left:"400px"}中的400px之间“+=”就表示在当前位置累加，“-=”就表示当前位置累减

　　停止动画：

　　　　stop()方法属于自定义动画函数，它回停止匹配元素正在运行的动画，并立即执行动画队列中的下一个动画

　　　　stop(clearQueue,gotoEnd)

　　　　参数：

　　　　　　clearQueue：表示是否清空尚未执行完的动画队列（值为true时，表示清空动画队列）

　　　　　　gotoEnd：表示是否让正在执行的动画直接到达动画结束时状态（值为true时，表示直接到达动画结束时状态）

 

　　延迟动画的执行

　　　　delay(时间)

　　判断元素是否处于动画状态

　　　　if(元素节点).is(":animated")){}

　　示例：

<body>
    <div id="box1" style="background-color: #00FFFF;width: 70px;height: 70px;">
    </div>
    <button id="btn1">111111111111111111111start</button>
    <button id="btn2">stop</button>
    <button id="btn3">isAnimate</button>
    
    <script type="text/javascript">
        $(document).ready(function(){
            var $div = $("#box1")
            // 执行动画
            $("#btn1").click(function(){
                var a = $div.animate({left:"100px",top:"100px"},5000).delay(1000).animate({left:"200px"},5000,function(){
                    console.log("动画执行结束")
                })
                // 停止动画
                $("#btn2").click(function(){
                    a.stop(false,false)
                })
            })
            
            // 判断是否执行动画
            $("#btn3").click(function(){
                if($("#box1").is(":animated")){
                    console.log("动画中......")
                }
            })
        })
    </script>
</body>

　　输出：

posted @ 2020-05-17 11:12  abner_pan  阅读(1418)  评论(0)  编辑  收藏  举报