2

クリックするとjquery animateを使用して、次のコードを使用して210px下に移動する#ballがあります。

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

現在、タイムアウトを使用して次の機能である「クラック」をトリガーしています。代わりに、#ball の動きを追跡したいのですが、その css top = 210px のときに関数 crack() をトリガーしたいのですが、どうすればよいですか?

Step 関数が私が探しているものである可能性があることをやや似た投稿で見ましたが、http://api.jquery.com/animate/で提供されている情報に基づいてそのソリューションにアプローチする方法がわかりません

デモを見てください: http://jsfiddle.net/EnigmaMaster/hbvev/4/

4

2 に答える 2

1

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

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

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

デモ

ボールがボックスに触れたときにクラックを呼び出し、それでもボックスの移動を続けたい場合は、次のように2つの手順で実行できます。

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

また、スローモーションで楽しむためにこのバージョンをチェックしてくださいhttp://jsfiddle.net/skram/hbvev/8/

于 2012-04-24T17:30:52.360 に答える
1

本当にボールの位置に基づいて何かをしたいのであれば、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 の正確な位置を確認することはできません。代わりに、特定の位置を通過するときに監視し、crackその後のすべてのポイントではなく、そのポイントでのみトリガーする必要があります。

$('#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化されている css の現在の値を確認するために使用できます。 stepアニメーション化されている各 css 属性の各ステップに対して呼び出されます。したがって、これらの使用には注意が必要です。なぜなら、どの属性値を見ているかを確認する必要があるからです (複数のとfxをアニメートしている場合)。topleft

$('#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();
            }                
        }
    });
});
于 2012-04-24T17:15:53.600 に答える