📅  最后修改于: 2023-12-03 15:32:08.165000             🧑  作者: Mango
jQuery animate() 方法可以用来执行 CSS 属性的动画效果。它可以改变元素的属性值,比如位置、大小、透明度等等。在此过程中,可以指定动画持续时间、速度曲线等参数,从而实现各种酷炫的效果。
使用 animate() 方法需要引入 jQuery 库。具体语法如下:
$(selector).animate(styles, speed, easing, callback);
其中:
{left: "+=100px", opacity: 0}
。下面我们来看一个简单的例子,让一个 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() 方法还可以接受一个回调函数作为参数,当动画结束时就会调用它。回调函数有一个参数,表示当前元素的状态。比如:
$("div").animate({
left: '+=500px'
}, 2000, function() {
console.log(this.style.left); // 打印:500px
});
这里我们先将 div 元素向右移动 500px,然后在回调函数中打印它的 left 属性。因为这个属性的初始值是 0,所以输出结果应该是 "500px"。
animate() 方法默认使用 "swing" 速度曲线,也就是先加速再减速。如果要改变速度曲线,可以使用参数 easing。常见的取值有:
除了这些预定义的字符串,还可以使用 CSS3 的贝塞尔曲线函数,比如:
$("div").animate({
left: '+=500px'
}, {
duration: 2000,
easing: 'cubic-bezier(.5, .05, .1, .3)'
});
这里我们使用 cubic-bezier 函数定义了一个自定义的速度曲线,产生了一种流畅且不寻常的动画效果。
animate() 方法还可以指定迭代效果,即动画重复执行,有两种实现方式:
$("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() 方法的队列效果。如果一个元素上有多个动画效果,它们会被依次添加到队列中,按照添加的先后顺序执行。如果你想同时执行多个动画效果,则可以使用动画队列的名字来区分它们。比如:
$("div")
.animate({left: '+=500px'}, {duration: 1000, queue: 'demo'})
.animate({top: '+=100px'}, {duration: 1000, queue: 'demo'});
这里我们给 div 元素添加了两个动画效果,分别是向右移动 500px 和向下移动 100px。由于它们都指定了 queue 参数为 "demo",因此会被添加到名为 "demo" 的队列里。这样,它们就会同时执行,产生一种流畅的效果。
以上就是 jQuery animate() 方法的介绍,希望对你有所帮助!