007_停止动画或效果

最新推荐文章于 2023-04-23 11:22:35 发布

自由与束缚JavaJavaScript

最新推荐文章于 2023-04-23 11:22:35 发布

阅读量157

点赞数

分类专栏： jQuery学习文章标签：动画 jquery javascript

本文链接：https://blog.csdn.net/aihiao/article/details/109806409

版权

jQuery学习专栏收录该内容

37 篇文章 0 订阅

订阅专栏

1. jQuery stop()方法

1.1. jQuery stop()方法用于在动画或效果完成前对它们进行停止。

1.2. stop()方法适用于所有jQuery效果函数, 包括隐藏显示、淡入淡出、滑动和自定义动画。

1.3. 语法

$(selector).stop(stopAll,goToEnd);

1.4. 可选的stopAll参数规定是否应该清除动画队列。默认是false, 即仅停止活动的动画, 允许任何排入队列的动画向后执行。如果为true, 当前活动动画停止, 同时也清空动画队列。

1.5. 可选的goToEnd参数规定是否立即完成当前活动动画。默认是false。

1.6. 因此, 默认地stop()会清除在被选元素上指定的当前活动动画, 允许任何排入队列的动画向后执行。

1.7. 下面的例子演示stop()方法, 不带参数:

$("#stop").click(function(){
	$("#panel").stop();
});

2. 例子

2.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>jQuery停止动画或效果</title>
		<meta charset="utf-8" />
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$("div").hide(3000);
					$("div").show(3000);
				});
				$('#btn2').click(function(){
					$("div").fadeOut(3000);
					$("div").fadeIn(3000);
				});
				$('#btn3').click(function(){
					$("div").slideUp(3000);
					$("div").slideDown(3000);
				});
				$('#btn4').click(function(){
					var div = $("div");
				  	div.animate({height:'+=100px', opacity: '0.5', fontSize: '2em'}, "slow");
				  	div.animate({width:'+=50px', opacity: '0.1', fontSize: '3em'}, "1000");
				  	div.animate({height:'+=100px', opacity: '0.5', fontSize: '2em'}, "2000");
				  	div.animate({width:'+=50px', opacity: '1', fontSize: '1em'}, "slow");
				});
				$('#btn5').click(function(){
					$("div").stop();
				});
				$('#btn6').click(function(){
					$("div").stop(false, false);
				});
				$('#btn7').click(function(){
					$("div").stop(true, false);
				});
				$('#btn8').click(function(){
					$("div").stop(false, true);
				});
				$('#btn9').click(function(){
					$("div").stop(true, true);
				});
			});
		</script>
	</head>
	<body>
		<button id="btn1">3s隐藏效果/3s显示效果</button>
		<button id="btn2">3s淡出效果/3s淡入效果</button>
		<button id="btn3">3s向上滑动效果/3s向下滑动效果</button>
		<button id="btn4">动画</button><br /><br />
		<button id="btn5">(默认)停止动画或效果</button> <button id="btn6">停止动画或效果</button> <button id="btn7">清除动画队列, 停止动画或效果</button>
		<button id="btn8">当前动画立即完成</button> <button id="btn9">清除动画队列, 当前动画立即完成</button><br /><br />

		<div style="background-color: red; width:300px; height: 150px; position: relative;">
			jQuery stop()方法用于在动画或效果完成前对它们进行停止。
		</div>
	</body>
</html>

2.2. 效果图

自由与束缚JavaJavaScript

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
007_停止动画或效果

1. jQuery stop()方法 1.1. jQuery stop()方法用于在动画或效果完成前对它们进行停止。1.2. stop()方法适用于所有jQuery效果函数, 包括隐藏显示、淡入淡出、滑动和自定义动画。1.3. 语法$(selector).stop(stopAll,goToEnd);1.4. 可选的stopAll参数规定是否应该清除动画队列。默认是false, 即仅停止活动的动画, 允许任何排入队列的动画向后执行。1.5. 可选的goToEnd参数规定是否立即完成当
复制链接

扫一扫