phpstudy集成环境

 首页 > animate如何用同一个按钮控制横向伸缩？

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>

首先得弄清楚逻辑，根据你的需求，我列出如下步骤：

1、点击按钮是触发条件，那么给按钮绑定click事件
2、需求是根据元素.btn1的宽度，进行动画效果（宽度为100，动画控制变为300；宽度为300，动画控制变为100）。那么每次点击元素，首先获取元素宽度作为判断依据。
3、最后根据判断情况实现最终需求

另外你代码中还有两个问题：

1、if判断条件用了一个"="
2、jquery.width()获取元素宽度值是不带单位"px"的

最后建议你把这类会操作dom的js代码放在页面最后运行（引入），防止页面加载出现js运行找不到dom元素（一开始还没有dom），导致报错停止运行。

<script type="text/javascript">
        $(document).ready(function()
        {
            $(".btn1").bind("click",function(){
                var l = $("#box").width();
                if(l == "100"){
                    $("#box").animate({width:"300px"});
                }else{
                    $("#box").animate({width:"100px"});
                }
            });
        });
    </script>

首先你需要具备以下知识：

  1. ready方法是什么时候执行的？

  2. bind方法是怎么用的？

  3. .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的知识建议多查阅官方文档。
希望对你有帮助。

【热门文章】
【热门文章】