特定の場所で要素の動きとトリガ機能を追跡する方法はありますか？

Question

は私がクリックしたときには、このコードを使用してダウン210pxに移動するためにjqueryのアニメーションを使用していること#ballを持っている：

$('#ball').click(function() { 
    $(this).animate({ 
     top: '+=210px' 
    }, 500); 
    setTimeout(crack, 400); 
});​ 

現在「クラック」で次の機能をトリガするためにタイムアウトを使用してイム。 代わりに、#ballの動きを追跡したいと思います。そのCSSのトップ= 210pxで関数crack（）をトリガーしたいとき、どうすればいいですか？

私はステップ関数は、私が探してかもしれないとやや似ポストで見たが、私はデモで

ルックに設けた情報に基づいて、そのソリューションにアプローチする方法がわからないです。http://jsfiddle.net/EnigmaMaster/hbvev/4/

Answer 1

あなたはボールが210pxのボックスに達することがわかっている場合は、トラッカーを使用する理由私はわかりません。

setTimeoutを取り除きたい場合は、.animateコールバック関数を使用します。これは、ボールがボックスに到達したときに呼び出されます。包みなさい

$('#ball').click(function() { 
    $(this).animate({ 
     top: '+=210px' 
    }, 500, crack); //<== crack will be called after ball animation 
});​ 

DEMO

あなたはボールが箱に触れたときに亀裂を呼び出すと、まだ箱の動きを継続したい場合、あなたはまた、以下のような2つの段階、

$('#ball').click(function() { 
    $(this).animate({ 
     top: '+=180px' 
    }, 400, function() { 
     crack(); 
     $(this).animate({ 
      top: '+=30px' 
     }, 100);    
    }); 
}); 

それを実行することができますスローモーションでこのバージョンを楽しくチェックしてくださいhttp://jsfiddle.net/skram/hbvev/8/

Answer 2

あなたが本当にボールの位置に基づいて何かをしたい場合は、[はい、stepはおそらく行くための最善の方法である：

$('#ball').click(function() { 
    $(this).animate({ 
     top: '+=210px' 
    }, { 
     duration: 500, 
     step: function() { 
      if($(this).offset().top > 208) { 
       crack(); 
      }     
     } 
    }); 
}); 

デモ：http://jsfiddle.net/qJjnN/1/

は今、注意点がいくつかあります：

1. 可能パフォーマンスヒットがあるでしょう。
2. 各ステップの位置は必ずしも整数ではなく、オブジェクトは開始位置と停止位置の間のすべてのピクセルに存在しません。
3. stepが最終位置で呼び出されないため、実際には210が最終的な場所であるかどうかを確認することはできません。

これを念頭に置いて、210pxの正確な位置を確認することはできません。デモ

$('#ball').click(function() { 
    var cracked = false; 
    $(this).animate({ 
     top: '+=210px' 
    }, { 
     duration: 500, 
     step: function() { 
      if($(this).offset().top > 208 && !cracked) { 
       cracked = true; 
       crack(); 
      }     
     } 
    }); 
}); 

：http://jsfiddle.net/qJjnN/2/

step機能もパラメータnowとfx持った後代わりに、あなたはすべての点、それはその時点で特定の位置だけトリガーcrackを通過するときに見ていないことになるでしょうアニメーション化されているCSSの現在の値を確認することができます。 stepは、アニメーション化される各CSS属性の各ステップごとに呼び出されます。したがって、それらを使用する場合は注意が必要です。fxを見て、あなたが見ている属性の値（複数の場合、topとleft）をアニメーション化しているかどうかを確認する必要があります。

$('#ball').click(function() { 
    var cracked = false; 
    $(this).animate({ 
     top: '+=210px' 
    }, { 
     duration: 500, 
     step: function(now, fx) { 
      if(fx.prop != 'top') { 
       return; 
      } 
      if(now > 208 && !cracked) { 
       cracked = true; 
       crack(); 
      }     
     } 
    }); 
});