猿问

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>


沧海一幻觉
浏览 714回答 1
1回答

慕尼黑5688855

首先你需要具备以下知识：ready方法是什么时候执行的？bind方法是怎么用的？.btn1被点击的时候会执行哪些代码？我们逐一来看。ready方法是什么时候执行的？ready方法在文档加载完成后执行。也就是说当body标签解析完后，以下代码将会执行一次：1.&nbsp; var l = $("#box").width();2.&nbsp; if(l = "100px"){3.&nbsp; &nbsp; &nbsp; $(".btn1").bind("click",function(){4.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#box").animate({width:"300px"});5.&nbsp; &nbsp; &nbsp; });6.&nbsp; } else {7.&nbsp; &nbsp; &nbsp; $(".btn1").bind("click",function(){8.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#box").animate({width:"100px"});9.&nbsp; &nbsp; &nbsp; });10. };我们来纠正一下代码中的基础错误。1.&nbsp;&nbsp;var&nbsp;l&nbsp;=&nbsp;$("#box").width();2.&nbsp;&nbsp;if(l&nbsp;==&nbsp;100){3.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(".btn1").bind("click",function(){4.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#box").animate({width:"300px"});5.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});6.&nbsp;&nbsp;}&nbsp;else&nbsp;{7.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(".btn1").bind("click",function(){8.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#box").animate({width:"100px"});9.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});10.&nbsp;};注意第2行的 = 已经被纠正为 ==。并且width方法返回的是100而不是"100px"。bind方法是怎么用的？bind方法用于给元素绑定事件处理函数。它本身并不会执行事件处理函数。看如下代码：$(".btn1").bind("click",&nbsp;function(){ &nbsp;&nbsp;&nbsp;&nbsp;$("#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()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$(".btn1").bind("click",&nbsp;function()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;$box&nbsp;=&nbsp;$("#box");&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;($box.width()&nbsp;==&nbsp;100)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$box.animate({width:&nbsp;"300px"}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$box.animate({width:&nbsp;"100px"}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}); });更多关于jQuery的知识建议多查阅官方文档。希望对你有帮助。
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答