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' } );不起作用,因为它不能引起颜色的动态变换,除非是数值。