jQuery:if（$（'；#indicator'；）.width（）

我能够制作一个宽度为150px的条动画。现在我尝试使它返回到其原始位置，但只有当它到达终点时。为什么条件：if（$（“#指示符”）.width（）>“149px”）不起作用？如何做好这一点

$(function(){        
  $("#play").click(function() {
    $("#indicator").animate({"width": "150px"}, 8400);
  });

  // indicador back to 0
  if ($('#indicator').width() > '149px') {
      $("#indicator").animate({"width": "1px"}, 100);
  }
});

在这里检查和播放：

jQuery

width（）

函数返回一个宽度值的整数，而不是包含宽度值所在单位的字符串，例如px

您的程序中存在逻辑错误。您可以链接

animate（）

函数。一旦第一个函数完成，它将自动移动到第二个

$(function(){
  $("#play").click(function() {
      $("#indicator").animate({"width": "150px"}, 8400).animate({ "width" : "1px" }, 100);
  });
});

---

您不能对像

'149px'

这样的字符串进行算术比较。相反，您需要使用

>149

。或者更好的是（更可读），

=150

返回一个数字：

.css（width）和.width（）之间的区别在于后者 返回单位较少的像素值（例如400），而前者返回单位完整的值（例如400px）

问题1 用于将指示器返回其原始位置的函数将在DOM就绪后立即启动（

$（function（）{/*code for when the DOM ready*/}）；

问题2 因为Javascript是异步的，所以应该为动画创建回调：

$(function(){

  $("#play").click(function() {
      $("#indicator").animate({"width": "150px"}, { duration: 8400, complete: function() {
          $("#indicator").animate({"width": "1px"}, 100);
      }});
  });

});

---

试试这个……不要使用

$（函数）

使用

上的

$("#play").on('click', function() {  
      $("#indicator").animate({"width": "150px"}, {duration:8400, complete:function(){
          $("#indicator").animate({"width": "1px"}, 100);
      }});
});

第二个函数将在DOM准备就绪后立即运行，因此在动画完成时它不会启动！
console.log（$（'#indicator'）.width（））；
应该告诉你为什么。我把你的答案放在这里，它似乎不起作用。我遗漏了什么？：但在小提琴中它起作用了：D我已经测试了5次@drinchevYes，是的，你是对的；）这就是为什么我删除了我的评论！我仍然不太明白为什么这不起作用？：jsfiddle.net/SwkaR/2您对条件的第一个回答是有意义的。嗯，它不起作用，因为您在IF语句中给出的条件只检查了一次（在DOM加载时）我首先发布了关于
.width（）
，因为我没有打开你的小提琴，也没有发现你的逻辑错误。
$("#play").on('click', function() {  
      $("#indicator").animate({"width": "150px"}, {duration:8400, complete:function(){
          $("#indicator").animate({"width": "1px"}, 100);
      }});
});