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。

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' );
    }
});

停止.animate（）

4 个答案: