jQuery动画animate方法使用介绍
animate方法介绍
animate方法是jQuery中非常强大的动画方法，它可以让HTML元素实现复杂多彩的动画效果。该方法可以接收2个或3个参数：
- 第一个参数是属性值的集合JSON对象，描述了动画结束时元素的样式属性。
- 第二个参数是指定动画持续的时间（单位是毫秒）。
- 第三个参数是指定动画完成后需要调用的回调函数（可选）。
示例一
功能描述
该示例演示如何使用animate方法实现元素的滑动效果。当用户点击按钮时，元素向左滑动，若再次点击按钮，则元素回到原始位置。
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>animate方法示例一</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
div.box{
width: 100px;
height: 100px;
background-color: #2196F3;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 200px;
}
button.btn{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="box"></div>
<button class="btn">开始</button>
<script>
$(function(){
var $box = $(".box"); //获取box元素
var flag = true; //标志位
$("button").click(function(){
if(flag){
$box.animate({
left:"-=200px"
}, 1000);
}else{
$box.animate({
left:"+=200px"
}, 1000);
}
flag = !flag; //修改标志位
});
});
</script>
</body>
</html>
代码解析
首先，我们在页面中创建了一个class为box的div元素，用于演示滑动效果。然后创建了一个id为btn的按钮元素用于触发滑动效果。接着我们在页面中插入了jQuery库，并在脚本中实现了该动画效果：当用户点击按钮时，如果元素$box的位置没有改变，就将其向左滑动200像素，反之，就将其向右滑动200像素。我们通过animate()方法来实现这个效果。
在脚本中，我们首先获取了box元素和一个标志位。当用户点击按钮时，根据是否滑动过来更新标志位，并通过if(flag)和else判断当前元素是否已经滑动过来，如果滑动过来了，就通过animate方法让它返回原位置，如果没有，就让它滑动过来。
示例二
功能描述
该示例演示如何使用animate方法实现一个闪烁的动画效果。
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>animate方法示例二</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
div.box{
width: 100px;
height: 100px;
background-color: #2196F3;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 200px;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
function blink(){
$(".box").animate({opacity:0},1000)
.animate({opacity:1},1000, blink);
}
$(function(){
blink();
});
</script>
</body>
</html>
代码解析
该示例中，我们在页面中创建了一个class为box的div元素，其样式就是一个蓝色正方形。然后我们定义了一个blink()方法，该方法使用了animate方法，实现div元素闪烁的动画效果。该效果的实现方式是，让元素逐渐变为透明状态，再逐渐变为不透明状态，循环执行。
在脚本中，我们通过一次animate使元素的opacity属性先减小到0，达到元素变成透明状态的效果，并在这之后透过回调函数实现动画的无限循环。最后我们在页面加载完毕之后，调用blink()方法，实现页面加载时就开始出现闪烁效果。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery动画animate方法使用介绍 - Python技术站
微信扫一扫 
支付宝扫一扫 