2

我能够制作一个动画到宽度 150 像素的栏。现在我试着让它回到原来的位置，但只有当它到达终点时。为什么条件： if ($('#indicator').width() > '149px') 不起作用？如何做好这件事？

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

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

在这里查看和播放：http: //jsfiddle.net/SwkaR/

4

5 回答 5

4

问题 1

在 DOM 准备好 ( $(function() { /* code for when the dom is ready */ });.

问题2

由于 Javascript 是异步的，你应该为你的动画创建一个回调：

$(function(){

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

});

http://jsfiddle.net/zEwHx/

于 2013-02-02T15:36:32.880 回答
2 
if ($('#indicator').width() > 149)

jQuerywidth()函数返回一个整数宽度值，而不是字符串，其单位也为 px。

您在程序中有逻辑错误。您可以链接animate()功能。一旦第一个功能完成，它会自动移动到第二个。

$(function(){
  $("#play").click(function() {
      $("#indicator").animate({"width": "150px"}, 8400).animate({ "width" : "1px" }, 100);
  });
});
于 2013-02-02T15:34:29.467 回答
1

宽度返回一个数字：

.css(width) 和 .width() 的区别在于后者返回一个没有单位的像素值（例如，400），而前者返回一个单位完整的值（例如，400px）

于 2013-02-02T15:36:07.920 回答
0

Try this... not use $(function) use the .on...

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

jsFiddle Example

于 2013-02-02T15:49:27.783 回答
0

您不能对像'149px'. 相反，您需要使用> 149. 或者更好（更具可读性），>= 150

于 2013-02-02T15:35:45.843 回答