📌  相关文章
📜  jQuery animate()(1)

📅  最后修改于: 2023-12-03 15:32:08.165000             🧑  作者: Mango

jQuery animate()

jQuery animate() 方法可以用来执行 CSS 属性的动画效果。它可以改变元素的属性值，比如位置、大小、透明度等等。在此过程中，可以指定动画持续时间、速度曲线等参数，从而实现各种酷炫的效果。

如何使用 animate() 方法？

使用 animate() 方法需要引入 jQuery 库。具体语法如下：

$(selector).animate(styles, speed, easing, callback);

其中：

  • selector 是你要执行动画的元素，可以是 CSS 选择器、DOM 对象或者 jQuery 对象。
  • styles 是一个对象，指定你要改变的 CSS 属性及其目标值，比如 {left: "+=100px", opacity: 0}。
  • speed 是动画的持续时间，可以用毫秒数表示，也可以用字符串 "slow"、"fast"、"normal" 表示。
  • easing 是动画的速度曲线，可以是预定义的几个字符串，也可以是贝塞尔曲线函数。
  • callback 是一个函数，当动画结束时会被调用。

下面我们来看一个简单的例子，让一个 div 元素飞出屏幕：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery animate() Demo</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("div").animate({
                    left: '+=500px',
                    opacity: 0
                }, 2000);
            });
        });
    </script>
</head>
<body>
    <button>Click me</button>
    <div></div>
</body>
</html>

点击按钮后，红色 div 元素就会向右飞出屏幕，逐渐变得透明。这里我们通过 animate() 方法实现了两个目标：改变 div 元素的 left、opacity 属性，以及指定了动画持续时间为 2 秒。

animate() 方法的回调函数

animate() 方法还可以接受一个回调函数作为参数，当动画结束时就会调用它。回调函数有一个参数，表示当前元素的状态。比如：

$("div").animate({
    left: '+=500px'
}, 2000, function() {
    console.log(this.style.left); // 打印：500px
});

这里我们先将 div 元素向右移动 500px，然后在回调函数中打印它的 left 属性。因为这个属性的初始值是 0，所以输出结果应该是 "500px"。

animate() 方法的速度曲线

animate() 方法默认使用 "swing" 速度曲线，也就是先加速再减速。如果要改变速度曲线，可以使用参数 easing。常见的取值有：

  • "linear"：匀速运动。
  • "swing"：先加速再减速（默认值）。
  • "easeIn"：渐显效果。
  • "easeOut"：渐隐效果。
  • "easeInOut"：淡入淡出效果。

除了这些预定义的字符串，还可以使用 CSS3 的贝塞尔曲线函数，比如：

$("div").animate({
    left: '+=500px'
}, {
    duration: 2000,
    easing: 'cubic-bezier(.5, .05, .1, .3)'
});

这里我们使用 cubic-bezier 函数定义了一个自定义的速度曲线，产生了一种流畅且不寻常的动画效果。

animate() 方法的迭代效果

animate() 方法还可以指定迭代效果，即动画重复执行，有两种实现方式：

  • 指定 times 参数，表示动画要执行的次数。
  • 指定 specialEasing 参数，它是一个对象，表示不同属性的速度曲线不同，用法如下：
$("div").animate({
    left: '+=500px',
    opacity: 0
}, {
    duration: 2000,
    easing: 'linear',
    specialEasing: {
        left: 'swing',
        opacity: 'linear'
    },
    complete: function() {
        $(this).remove();
    }
});

这里我们让 div 元素向右移动 500px，并逐渐变得透明，然后将其从 DOM 树中移除。在这个动画过程中，我们指定了 left 属性的速度曲线为 "swing"，而 opacity 属性的速度曲线为 "linear"，以达到不同的视觉效果。

animate() 方法的队列效果

最后，我们来介绍 animate() 方法的队列效果。如果一个元素上有多个动画效果，它们会被依次添加到队列中，按照添加的先后顺序执行。如果你想同时执行多个动画效果，则可以使用动画队列的名字来区分它们。比如：

$("div")
    .animate({left: '+=500px'}, {duration: 1000, queue: 'demo'})
    .animate({top: '+=100px'}, {duration: 1000, queue: 'demo'});

这里我们给 div 元素添加了两个动画效果，分别是向右移动 500px 和向下移动 100px。由于它们都指定了 queue 参数为 "demo"，因此会被添加到名为 "demo" 的队列里。这样，它们就会同时执行，产生一种流畅的效果。

以上就是 jQuery animate() 方法的介绍，希望对你有所帮助！