JQuery自定义动画——animate()学习

article/2025/10/8 15:23:12

JQuery自定义动画——animate()学习

可以使用animate 方法创建和实现自定义动画，animate() 方法通过执行 CSS 属性集的自定义动画，满足更多复杂多变的要求。
该方法通过CSS样式将元素从一个状态改变为另一个状态。即通过CSS属性值逐渐改变的，实现动画效果。

一.animate()方法的定义

语法： $(selector).animate(styles, [speed], [easing], [callback])
Styles:必选。规定产生动画效果的 CSS 样式和值。
Speed:可选。规定动画的速度。
Easing:可选。规定在不同的动画点中设置动画速度的 easing 函数: swing/ linear
Callback:可选。回调函数。

Styles参数写法：以键值对形式设置（可能会存在修改多个CSS样式)
如：改变一个div的高度，同时改变宽度透明度等。

$('#box').animate({height : '200px’,width : '300px',opacity : 0.5,fontSize : '50px’})

举例：
在这里插入图片描述
点击按钮‘执行动画’后

实现代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Jquery(Javascript)</title>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><style>#box {width:100px;margin:25px;background-color:  #6495ed;position:absolute;border:3px dashed blue;
}
</style>
</head>
<body><input type="button" class="button" value="执行动画!" /><div id="box">RIA应用开发</div>
<script>$('.button').click(function () {$('#box').animate({width : '300px',height : '200px',opacity : 0.5,fontSize : '50px'}, 2000, function () {alert('动画执行完毕！');});}); 
</script>
</body>
</html>

二.animate()方法实现绝对位移动画

在这里插入图片描述
实现代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Jquery(Javascript)</title>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><style>#box {width:100px;margin:25px;background-color:  #6495ed;position:absolute;border:3px dashed blue;
}
</style>
</head>
<body><input type="button" class="button" value="执行动画!" />
<div id="box">RIA应用开发</div>
<script>// 位移$('.button').click(function () {$('#box').animate({left : '300px',top : '200px'}, 10000);});
</script>
</body>
</html>

三.animate()方法实现相对位移动画

使用 “+=” 或 “-=” 来创建相对动画。
举例：每点击按钮，图片就会相对自己当前的位置右移200px。
在这里插入图片描述
实现代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Jquery(Javascript)</title>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><style>#box {width:100px;margin:25px;background-color:  #6495ed;position:relative;border:3px dashed blue;
}
</style>
</head>
<body><input type="button" class="button" value="执行动画!" /><div id="box">RIA应用开发</div>
<script>
$(function () {$('.button').click(function(){$('#box').animate({left : '+=100px'}, 'slow');}); 
});
</script>
</body>
</html>

四.animate() 方法回调函数实现列队动画

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Jquery(Javascript)</title>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><style>#box {width:100px;margin:25px;background-color:  #6495ed;position:relative;border:3px dashed blue;
}
</style>
</head>
<body>
<div id="box">RIA应用开发</div>
<script>
$(function () {$('#box').animate({left :  '+=200px'}, function (){$('#box').animate({left :  '+=200px'}, function (){$('#box').animate({left :  '+=200px'});});});;
});
</script>
</body>
</html>

五.animate() 方法连缀实现列队动画

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Jquery(Javascript)</title>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><style>#box {width:100px;margin:25px;background-color:  #6495ed;position:relative;border:3px dashed blue;
}
</style>
</head>
<body>
<div id="box">RIA应用开发</div>
<script>
$(function () {$('#box').animate({width : '300px'}).animate({height : '200px'}).animate({opacity : 0.5}).animate({fontSize : '50px'})
});
</script>
</body>
</html>

六. stop() 方法停止当前正在运行的动画

语法：$(selector).stop([stopAll], [goToEnd])
参数 stopAll 规定是否停止被选元素的所有加入队列的动画，默认为 false，如果参数为true，当有列队动画的时候，会取消后面的列队动画。
参数 goToEnd 规定是否允许完成当前的动画，默认为 false，如果参数为 true，则停止后立即到达末尾处。(该参数只能在设置了 stopAll参数时使用。)
举例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Jquery(Javascript)</title>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><style>#box {width:100px;margin:25px;background-color:  #6495ed;position:relative;border:3px dashed blue;
}
</style>
</head>
<body><input type="button" class="button" value="执行动画!" /><input type="button" id="stop" value="停!"/>
<div id="box">RIA应用开发</div>
<script>
$(function () {// 位移$('.button').click(function () {$('#box').animate({left : '300px',top : '200px'}, 10000);});// 停止方法$("#stop").click(function(){$("#box").stop(true,true);//直接跳到最后位置//$("#box").stop(true,false);//停在当前位置//$("#box").stop(); });   
});
</script>
</body>
</html>