jq动画

2024-02-09 19:49:58

使用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>

码农公寓

相关文章