问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
vvhl
    64125146173

    为什么同一个按钮上无法设置两种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>
    jqueryjavascript
    阅读 3.5k
    2 个回答
    得票最新
    头像
    SevenOutman
      3.2k31225
      ✓ 已被采纳

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

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

      头像
      小桃酥的曲奇饼
        14411017

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

        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>
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题