jQuery(6)——jQuery animate动画

## jQuery 效果- 动画

语法：

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

jQuery所有动画属性都可以被动画化为一个单独的数值，除了下面所提到的以外，大多数非数字的属性不能使用基本的jQuery功能进行动画（例如，宽度、高度或者左边可以被动画化，但是背景颜色，字体颜色不能）

参考手册：https://www.w3cschool.cn/jquery/eff-animate.html

jQuery stop() 方法

jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

语法:

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。

练习demo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>jQuery学习 animate动画</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>
    $(document).ready(function(){

        $("#btn1").click(function(){
            $("#test").animate({
                left:'50px',
                top:'100px',
                opacity:'0.8',
                height:'150px',
                width:'250px',
            });
        }); 

        $("#btn2").click(function(){
            $("#test2").animate({
                height:'toggle',
                width:'toggle',
            });
        }); 

        $("#btn3").click(function(){
            var obj=$("#test3")
            obj.animate({height:'300px'},'slow');
            obj.animate({width:'300px'},'slow');
            obj.animate({height:'200px'},'slow');
            obj.animate({width:'200px'},'slow');
            obj.animate({opacity: "0.5",},'slow');
        });
        $("#btn4").click(function(){
            $("#test3").stop();
        })
        
    })
    </script>
    <style>
        .box,.box2,.box3{
            width: 300px;
            margin:0 auto;
            border: 2px solid green;
            position: relative;
        }
        .box2{
            margin-top:220px;
        }
        .box3{
            background-color: red;
        }
        #test{
            background:#98bf21;
            width:200px;
            position:absolute;
        }
        #test2,#test3{
            background-color:yellow;
            width:200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="box">
        <button id="btn1">点击</button>
        <div id="test">
                默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
                如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!
        </div>
    </div>
    <div class="box2">
        <button id="btn2">toggle实现显示隐藏</button>
        <div id="test2">
            toggle
        </div>
    </div>
    <div class="box3">
            <button id="btn3">多个animate</button><button id="btn4">停止</button>
            <div id="test3">
                多个animate
                jQ无法的animate无法修改背景色，
                可以设置父级背景色和子级的背景色+透明度opacity来修改(虽然有点不可预知)
            </div>
        </div>
</body>
</html>

预览

See the Pen mzWLxb by 练涛 (@liantao) on CodePen.

jQuery(6)——jQuery animate动画

## jQuery 效果- 动画

jQuery stop() 方法

猜你喜欢