animate如何用同一个按钮控制横向伸缩？
为什么同一个按钮上无法设置两种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>
沧海一幻觉浏览 828回答 1
1回答
-
慕尼黑5688855
首先你需要具备以下知识：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的知识建议多查阅官方文档。希望对你有帮助。
随时随地看视频慕课网APP
相关分类
JavaScript