javascript - animate如何用同一个按钮控制横向伸缩？-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

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

伊谢尔伦 2017-04-11 10:58:27

[JavaScript讨论组]

710

为什么同一个按钮上无法设置两种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>
<p id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">
</p>
<button class="btn1">Animate</button>
</body>
</html>

伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

全部回复(2)

PHP中文网2017-04-11 11:00:27 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

添加回复

怪我咯2017-04-11 11:00:27 1楼

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

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>

赞 +0

添加回复