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

发布于 2024-11-19 13:56:44 字数 934 浏览 2 评论 0原文

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

这是我的代码...

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

I am trying to animate the background of an element from it's current position when the user clicks a button. I am able to do this on the first click but the subsequent clicks fail.

Here's my code...

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

EDIT:

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

As suggested below, this works great unless you're using IE where it resets back to 0 at each click then animates again.

Here's a link to what I mean... http://jsfiddle.net/TdaSV/

Solution (as a result of being pushed in the right direction):

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

青萝楚歌 2024-11-26 13:56:44

您应该首先停止上一个动画,然后开始一个新的动画:

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

另外,如果您需要向当前背景位置添加 297 像素,则不需要读取当前位置,请执行以下操作:

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

在 jquery 网站中查看更多示例。

You should first stop the previous animation and then start a new one:

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

also if you need to add 297 pixels to the current background position, you don't need to read the current position, following shoudl work:

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

see more examples in jquery website.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文