animate简单总结_animate软件的实验报告-CSDN博客

本文链接：https://blog.csdn.net/lz465350/article/details/39696535

1、先上代码，感觉被这段代码折磨了我好久了（说白了也就几个小时，但感觉很漫长……）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

	<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
		  $(".btn1").unbind("click").click(function(){
			$("#box").animate({
					fontSize:'10px',
					left:50
				},2000,function(){
					alert("change1");
			});
		  });
		  $(".btn2").unbind("click").click(function(){
			$("#box").animate({
				fontSize:'100px',
				left:200
			},2000,function(){
					alert("change2");
			});
		  });
		});
	</script>
</head>
<body>
	<p id="box" style="font-size:20px;color:green;position:relative;width:200px">
		this is a div!
	</p>
	<button class="btn1">change1</button><button class="btn2">change2</button>
</body>
</html>

2、一点儿点儿分析代码的编写过程。一开始在w3school时测试的很成功，但是当拿到自己的环境下测试时，结果竟然没有任何反应。然后我开始觉得是我的jquery库文件太老了，于是就把src改为百度云应用库里面的，就可以成功了。

3、有时候会由于我设定的animate变换时间太长，因此很容易以为又出问题了，于是多点了几次按钮之后竟然有反应了，结果效果是几次按钮的累加，动了好几下（此处的unbind效果不是很明显）。后来我想起了unbind函数，取消所有的click绑定然后再挂起一个新的click事件。用到这个语句：

$(".btn2").unbind("click").click(function(){

先停止所有的，再加载新的。类似的还有如：

ob_navigation_parent.find("div.guide_div").stop().slideDown();

4、实践证明，以下写法均是错误的：

$("#box").animate( { fontSize: 100px } ); //未给100px加单引号

而$("#box").animate( { fontSize: 100+'px' } );

$("#box").animate( { fontSize: 100 } );

$("#box").animate( { fontSize: '100px' } );都是正确的！

5、$("#box").animate( { color: 'blue' } );不起作用，因为它不能引起颜色的动态变换，除非是数值。

3-7 [attribute=value]属性选择器