1

我有以下使用 jquery 代码的 javascript：

function MakeAnimation(anim_times)
{
    for (k=1; k<=anim_times; k++)
    {
        if ( $("#one").position().top >= 250 ) {
            $("#one").animate({ top: '50px' }, 200, function() {});
        } else {
            $("#one").animate({ top: '+=50' }, 200, function() {});
        }
    }
}

并在 html 正文上：

<button onclick="MakeAnimation(1);">step 1</button>
<button onclick="MakeAnimation(20);">step 20</button>
<div id="one" style="background-color:red; width:100px; height:100px; position:absolute; top:50px;"></div>

两个按钮调用相同的函数，但是当函数调用 20 次 for 循环时......第 5 行 [ if ( $("#one").position().top >= 250 ) { ] 不起作用

有什么建议么 ？

谢谢

4

2 回答 2

1

jsBin 演示

您需要做的就是乘以被调用的次数，n没有循环，并且......MakeAnimation

您只需要使用step函数来检索顶部位置属性值。不要害怕，默认情况下它在animation方法内部可用：

function MakeAnimation(n){
  n=n+1;         // I used n=n+1 cause you already start from 50px top...
  $('#one').animate({ top: 50*n },{
       step: function(now) {     // the step function!
          if(now>=250){
              $(this).stop().animate({top: 50 }, 200);
          }
       },
       easing: 'linear',  // the default easing in animations is 'swing'
       duration: 200*n
    }); 
}

来自文档：http ://api.jquery.com/animate/#step

于 2012-10-03T09:03:25.023 回答
1

似乎按预期工作。我为此创建了一个小提琴。

对不起这是我的错！要回答 AkisC 的问题，for循环是同步的，但是animations是异步的（参考Wait for a jQueryanimation to complete inside for loop）。因此，对于第二个按钮，我们总是将“50”作为每次迭代的最高值，并且if ( $("#one").position().top >= 250 ) {永远不会执行。

我用新方法修改了我的小提琴：http: //jsfiddle.net/kayen/3SSeu/

于 2012-10-03T08:29:25.990 回答