jq动画和停止动画

向右看齐 2023-06-05 08:10 36阅读 0赞

使用jq 实现动画循环效果
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
        .box {
            height: 200px;
            background-color: green;
            font-size: 60px;
            color: white;
        }
        .item {
            width: 200px;
            height: 200px;
            position: fixed;
            top: 0;
            left: 0;
            background-color: red;
        }
        </style>
    </head>
    <body>
        
        <div class="item"></div>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
        <script>
      
        function run(){
            $('.item').animate({
                width:  '50px',
                height : '50px',
                // backgroundColor : 'yellow',
                //animate不支持背景色的变化，要导入一个jq实现的颜色库
                top: '300px',
                left : '300px'
            },5000,function(){
                $('.item').animate({
                    width:  '200px',
                    height : '200px',
                    top: '0',
                    left : '0'
                },3000,run);
            });
        };
    
        run();
        // 接受三个参数，第一个是对象，接受目标样式列表； 第二个是时间；第三个是执行完成的回调函数
        </script>
    </body>
    </html>

吧执行的代码封装在函数里，并作为他自己的回调函数。就可以实现动画的反复实现

色彩动画不包含在核心jq库中~~~

padding-left 之类的值要写成驼峰的命名方法

然后，改变的样式，也可以做相对值的运算，相对于原有值

$('.item').animate({
            width: '+=200px',
            height: '-=50px'
        },3000);

也可以使用预设的值   "show"、"hide" 或 "toggle"：

举个栗子~~

$('.item').animate({
                width: 'hide'
            }, 3000);

给元素设置了多个animate动画时，会按设置顺序逐一执行。不会产生覆盖。

举个栗子~

<div class="item">いのししですね</div>
        <button class="btn">button</button>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
        <script>
            $("button").click(function () {
                var div = $("div");
                div.animate({
                    height: '300px',
                    opacity: '0.4'
                }, "slow");
                div.animate({
                    width: '300px',
                    opacity: '0.8'
                }, "slow");
                div.animate({
                    height: '100px',
                    opacity: '0.4'
                }, "slow");
                div.animate({
                    width: '100px',
                    opacity: '0.8'
                }, "slow");
            });

</script>

jq停止动画

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
      
            .wrap {
                width: 300px;
                height: 300px;
                background-color: green;
            }
        </style>
    </head>
    <body>
        
        <button class="btn1">start</button>
        <button class="btn2">end</button>
    
        <div class="wrap">
    
        </div>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
        <script>
        $('.btn1').click(function(){
            $('.wrap').animate({
                width: '100vw',
                height : '100vh'
            },8000);
        });
        $('.btn2').click(function(){
            $('.wrap').stop();
        });
        </script>
    </body>
    </html>

[https://www.cnblogs.com/sandraryan/][https_www.cnblogs.com_sandraryan]

转载于:https://www.cnblogs.com/sandraryan/p/11526488.html

[https_www.cnblogs.com_sandraryan]: https://www.cnblogs.com/sandraryan/