jquery运动

最新推荐文章于 2022-04-17 13:12:56 发布

csq2804106929

最新推荐文章于 2022-04-17 13:12:56 发布

阅读量420

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/csq2804106929/article/details/49777827

版权

jquery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

animate()宽高不能设添 px stop() finish()

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.div1{
		background: red;
		width: 100px;
		height: 100px;
	}
	.div2{
		background: yellow;
		width: 50px;
		height: 50px;
	}
	.div3{
		background: blue;
		width: 50px;
		height: 50px;
	}
	.div4{
		background: #ccc;
		width: 50px;
		height: 50px;
	}
	</style>
	<script src="jquery-2.1.4.js"></script>
	<script>
	$(function(){
		/*第一个参数：{}运动的属性和值
		  第二个参数：时间 默认400毫秒
		  第三个参数：运动形式 默认swing(慢快慢)，linear(匀速)
		  第四个参数：callback回调函数
		*/
		$('.div1').click(function(){
			$(this).animate({width: 400},4000).animate({height: 500},4000);
		});
		$('.div2').click(function(){
			$('.div1').stop();//只能阻止当前运动,即animate({width: 400},4000)无效,animate({height: 500},4000)有效
		});
		$('.div3').click(function(){
			$('.div1').stop(true);//阻止所有运动,animate({width: 400},4000).animate({height: 500},4000)都无效
	    });
	    $('.div4').click(function(){
			$('.div1').finish();//快速停止到指定目标点
		});
	});
	</script>
</head>
<body>
	<div class="div1"></div>
	<br/>
	<div class="div2"></div>
	<br/>
	<div class="div3"></div>
	<br/>
	<div class="div4"></div>
</body>
</html>