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>

両方のボタンが同じ関数を呼び出しますが、関数がforループを20回呼び出した場合... 5行目[if（$（ "＃one"）。position（）。top> = 250）{]は機能しません

助言がありますか ？

ありがとう

4

2 に答える 2

1

期待どおりに機能しているようです。このためのフィドルを作成しました。

すみません、悪いです！AkisCの質問に答えるために、forループは同期的ですがanimations、非同期的です（forループ内でjQueryanimationが完了するのを待ちます）。したがって、2番目のボタンの場合、すべての反復で常に「50」が最上位値として取得され、if ( $("#one").position().top >= 250 ) {が実行されることはありません。

新しいアプローチでフィドルを変更しました：http：//jsfiddle.net/kayen/3SSeu/

于 2012-10-03T08:29:25.990 に答える
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 に答える