Question

我试图在用户点击按钮时为其当前位置设置元素的背景动画。我可以在第一次点击时执行此操作，但后续点击失败。

这是我的代码......

var testme;

$(document).ready(function(){     
    $(".navleft").live("click", function() {
        testme = parseInt($(this).css("background-position").replace("% 0%", "").replace("px 0%", ""));
        $(this).parent().animate({backgroundPosition: (testme + 297) + "px"}, 500);
        $(this).parent().find("p").text(testme);
    });
});

编辑：

$(".navleft").live("click", function() {
    $(this).parent().animate({backgroundPosition: "+=297"}, 500);
});

正如下面所建议的那样，除非你使用的是IE，然后每次点击重置为0，然后再次动画，这样做效果很好。

这是我的意思的链接...... http://jsfiddle.net/TdaSV/

解决方案（由于被推向正确的方向）：

$(".navleft").live("click", function() {
    $(this).parent().animate({'background-position-x': '+=297'}, 500);
});

Answer 1

您应首先停止上一个动画，然后开始一个新动画：

$(this).parent().stop(true, true).animate({backgroundPosition:...

如果您需要将297像素添加到当前背景位置，则无需在shoudl工作后读取当前位置：

$(this).parent().animate({backgroundPosition: "+=297"}, 500);

see more examples in jquery website.

jquery animate background-position - 首先获取当前背景位置的问题

1 个答案: