jQuery 停止动画

最新推荐文章于 2022-04-28 20:29:22 发布

AllenWalker1936

最新推荐文章于 2022-04-28 20:29:22 发布

阅读量322

点赞数

分类专栏： jQuery jQuery效果

本文链接：https://blog.csdn.net/AllenWalker1936/article/details/88898150

版权

jQuery 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

jQuery效果

7 篇文章 0 订阅

订阅专栏

jQuery 停止动画

方法

stop()

语法

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

代码

<!doctype html>
	<head>
	<title>jq停止动画</title>
	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#div1").click(function(){
				$("#div2").slideToggle();
			});
			$("#bt1").click(function(){
				$("#div3").animate({left:'+=200px',opacity:'1'},4000);
				$("#p1").animate({fontSize:'+=1em'},4000);
			});
			$("#bt2").click(function(){
				$("#div3").stop();
			});
			$("#bt3").click(function(){
				$("div,p").stop(true);
			});
			$("#bt4").click(function(){
				$("div,p").stop(true,true);
			});
		});
	</script>

	<style type="text/css">
		#div1,#div2{
		margin:0px;
		padding:10px;
		background:#66ccff;
		border:solid 1px black;
		text-align:center;
		}
		#div2{
		padding:50px;
		display:none;
		}
		#div3{
		height:300px;
		width:300px;
		background:green;
		text-align:center;
		opacity:0;
		position:absolute;
		}
	</style>
	</head>

	<body>

	<div id="div1" class="">
		点击这里
	</div>
	<div id="div2" class="">
			<input type="button" id="bt1" value="开始" "">
			<input type="button" id="bt2" value="停止" "">
			<input type="button" id="bt3" value="全部停止" "">
			<input type="button" id="bt4" value="直接完成" "">
	</div>
	<div id="div3" class=""><p id="p1">hello world!</p></div>
	</body>
</html>