jq中的自定义动画

钱端攻城狮

已于 2022-04-02 21:45:08 修改

阅读量381

点赞数

分类专栏： jQuery 文章标签：前端

于 2022-04-02 21:42:46 首次发布

本文链接：https://blog.youkuaiyun.com/m0_54932975/article/details/123929673

版权

jQuery 自定义动画动画效果数值属性 stop()

关键词由优快云通过智能技术生成

jQuery 专栏收录该内容

21 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jq中的自定义动画</title>
		<style type="text/css">
			#one{
				width: 200px;
				height: 200px;
				background-color: sandybrown;
			}
		</style>
	</head>
	<body>
		<div id="one"></div>
	</body>
</html>

<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>


<script type="text/javascript">
	//自定义动画 
  //特点:只有数字值才会有动画效果,例如宽高 透明度 margin left top等
  //例如背景色是没有动画效果的! 因为其值是字符串!!
	
	$("#one").animate({
		width:500,
		height:500,
		backgroundColor:"red",
		borderRadius:"50%",
		marginLeft:200
	}, 2000, "linear", function(){
		console.log("动画结束才会执行此处代码!!!");
		$("#one").css("background-color", "green");
	}).stop();  //动画刚开始就结束啦!! stop()用来停止动画!!!
	
	//动画停止 是stop()
	//jq中 点语法连续操作 
	
</script>