JQuery 自定义动画( animate() )

最新推荐文章于 2023-06-16 00:02:59 发布

原创最新推荐文章于 2023-06-16 00:02:59 发布 · 245 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

JQuery 专栏收录该内容

57 篇文章

订阅专栏

本文详细介绍了JQuery中的animate()方法，用于实现自定义动画效果。animate()函数允许我们针对数字类型的样式属性进行平滑过渡。通过链式编程，可以连续执行多个动画效果。同时，我们可以利用`:animated`选择器选取正在执行动画的元素。此外，stop()函数用于控制动画的停止，不传参时仅停止当前动画，传入true则会清空动画队列。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义动画：animate(样式，时间)
只能对数字类型的样式设置动画
使用链式编程，可以将多个动画拼接起来
选择器“:animated”，选择正在执行动画的元素
停止动画：stop();
如果不传递参数，表示停止当前动画，后续动画会继续执行
传递参数true，表示停止当前动画，并且清除所有的动画队列

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>自定义动画</title>
	<style>
	#div1 {
		width:100px; height:100px;
		background-color:black;
	}
	</style>
    <script src="scripts/jquery-1.7.1.min.js"></script>
    <script>
        $(function() {
			//自定义动画按钮
            $('#btnAnimate').click(function(){
				$('#div1').animate({
					'width':'50px',
					'height':'50px'
				},1000);   //1000毫秒，表示动画过程时间。
			});

			//（链式编程）自定义动画按钮
            $('#btnChain').click(function(){
				$('#div1').animate({
					'width':'50px'
				},1000).animate({
					'height':'50px'
				},1000).animate({
					'opacity':'0.5'  //半透明度
				},1000);
			});

			//停止当前动画按钮
            $('#btnStopCurr').click(function(){
				$(':animated').stop(); //stop() 不传参数表示只停止当前动画。
			});

			//停止所有动画按钮
            $('#btnStopAll').click(function(){
				$(':animated').stop(true);  //传递参数true表示停止所有动画。
			});
        });
    </script>
</head>
<body>
    <input type="button" id="btnAnimate" value="动画"/>
	<input type="button" id="btnChain" value="链式编程动画"/>
	<input type="button" id="btnStopCurr" value="停止当前动画"/>
	<input type="button" id="btnStopAll" value="停止所有动画"/>
	<div id="div1"></div>
</body>
</html>