jquery animate background-position - 首先获取当前背景位置的问题
当用户单击按钮时,我试图从当前位置为元素的背景设置动画。我可以在第一次单击时执行此操作,但后续单击失败。
这是我的代码...
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您应该首先停止上一个动画,然后开始一个新的动画:
另外,如果您需要向当前背景位置添加 297 像素,则不需要读取当前位置,请执行以下操作:
在 jquery 网站中查看更多示例。
You should first stop the previous animation and then start a new one:
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:
see more examples in jquery website.