停止.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')用于获取right CSS属性的计算值。此外，$img还用于缓存jQuery对象，以避免两次查询DOM。