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 属性的计算值。另外，$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' );
    }
});