jquery - .animate() を停止

Question

3072pxボタンでimgの右への移動を停止するようにしようとしています。ifアニメートボタンの中にステートメントを入れる必要があると思います。そうですか？

$(document).ready( function() {
    $('a.click').click(function() {
        $('img').animate({right : '+=1024'} , 'slow' );
    });
});

Answer 1

$(document).ready(function () {
    var $a = $('a.click');
    $a.on('click', function () {
        $('img').animate({
            right: '+=1024'
        }, {
            step: function (now, fx) {
                if (now >= 3072) {
                    $(fx.elem).stop();
                    // $a.off('click');
                }
            }
        });
    });
});

http://jsfiddle.net/82mWF/

Answer 2

このstepオプションを使用すると、堅牢なアニメーション制御が可能になります。

$('a.click').click(function()
{
    var $img = $('img');
    $img.animate({right: '+=1024'},
    {
       duration:'slow',
       step:function() { if ($img.offset().left + $img.width() >= 3072) $(this).stop(); }
    }
});

このアプローチを拡張して、ウィンドウの境界、別の要素、またはアニメーションの進行中に変化する可能性のある値をチェックできます。

Answer 3

あなたの質問が正しければ、このようなものは問題ないはずです。

$('a.click').click(function() {
    var $img = $('img');
    if ($img.css('right') <= (3072 - 1024)) {
        $img.animate({right : '+=1024'} , 'slow' );
    }
});

.css('right')rightCSS プロパティの計算値を取得するために使用されます。また、2 回$imgのクエリを避けるために、jQuery オブジェクトをキャッシュするために使用されます。DOM

Answer 4

クリック ハンドラーで、まず現在の権限と の差を計算し、3072それが より大きい場合は1024でアニメーション化し+=1024ます。そうでない場合は、違いが何であれ += を実行します。

何かのようなもの：

$('a.click').click(function() {
        var $img = $('img');
        var delta = 3072 - $img.css('right');
        var anim = delta > 1024 ? 1024 : delta;
        $img.animate({right : '+=' + anim} , 'slow' );
    }
});