为什么同一个按钮上无法设置两种animate属性呢，该怎样修改这段代码使同一个按钮点击一次时伸展，点击第二次时收缩呢?<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function() { var l = $("#box").width(); if(l = "100px"){
$(".btn1").bind("click",function(){
$("#box").animate({width:"300px"});
});
}else{
$(".btn1").bind("click",function(){
$("#box").animate({width:"100px"});
});
};
});</script></head><body><div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"></div><button class="btn1">Animate</button></body></html>
1 回答
慕尼黑5688855
TA贡献1848条经验 获得超2个赞
首先你需要具备以下知识：
ready方法是什么时候执行的？bind方法是怎么用的？.btn1被点击的时候会执行哪些代码？
我们逐一来看。
ready方法是什么时候执行的？
ready方法在文档加载完成后执行。
也就是说当body标签解析完后，以下代码将会执行一次：
1. var l = $("#box").width();
2. if(l = "100px"){
3. $(".btn1").bind("click",function(){
4. $("#box").animate({width:"300px"});
5. });
6. } else {
7. $(".btn1").bind("click",function(){
8. $("#box").animate({width:"100px"});
9. });
10. };
我们来纠正一下代码中的基础错误。
1. var l = $("#box").width();2. if(l == 100){3. $(".btn1").bind("click",function(){4. $("#box").animate({width:"300px"});5. });6. } else {7. $(".btn1").bind("click",function(){8. $("#box").animate({width:"100px"});9. });10. };注意第2行的 = 已经被纠正为 ==。并且width方法返回的是100而不是"100px"。
bind方法是怎么用的？
bind方法用于给元素绑定事件处理函数。它本身并不会执行事件处理函数。
看如下代码：
$(".btn1").bind("click", function(){
$("#box").animate({width:"300px"});
});注意，此时$("#box").animate(...)并没有执行。而是在.btn1被点击后才会执行。
.btn1被点击的时候会执行哪些代码？
现在我们来回顾一下上面标有行号的代码1-10行。
这段代码为.btn1绑定了一个点击事件处理函数，.btn1被点击后执行的就是这个处理函数。
这个处理函数到底是什么呢？
如果l == 100那么这个函数就是...animate(...300)，否则这个函数就是...animate(...100)。
注意，这个判断是在文档加载完成的时候执行了一次，而不是在每次点击.btn1的时候执行。
因此，你在一开始就决定了点击.btn1时应该调整#box的width为100还是300，并且此后是不会改变的。
应该如何实现你要的效果？
直接看代码吧，如果已经能够理解自然是再好不过：
$(document).ready(function() {
$(".btn1").bind("click", function() { var $box = $("#box"); if ($box.width() == 100) {
$box.animate({width: "300px"});
} else {
$box.animate({width: "100px"});
}
});
});更多关于jQuery的知识建议多查阅官方文档。
希望对你有帮助。
添加回答
举报
0/150
提交
取消