使用 jQuery 的增量背景位置动画答案

【问题标题】：Incremental background position animation with jQuery使用 jQuery 的增量背景位置动画
【发布时间】：2011-01-27 00:11:50
【问题描述】：

我有一个 100% 宽和 284 像素高的 div，名为 #photoStripe，背景图像为 5000 像素。然后在它上面的左右导航按钮。这个想法是能够通过左右递增地为背景图像设置动画来左右平移。

我正在使用popular background position plugin，它允许您同时为背景位置的 x 和 y 值设置动画。

嗯，背景动画，但它只做一次。（不能一次又一次地点击）。有什么想法吗？

jQuery:

$('#photoStripe').css({backgroundPosition:"0 0"});

$('a.moveLeft').click(function(){
    $('#photoStripe').stop().animate({backgroundPosition:'-=200px 0'}, {duration:500});
});
$('a.moveRight').click(function(){
    $('#photoStripe').stop().animate({backgroundPosition:'+=200px 0'}, {duration:500});
});

CSS：

#photoStripe {
width:100%;
height:286px;
text-align:center;
overflow:hidden;
background:url(../_images/photo_stripe.jpg);
}

【问题讨论】：

标签： jquery jquery-animate background-position

【解决方案1】：

当我检查这段代码时，在 FF 中似乎很好，这是我的代码，你确定那里有所有东西吗？你能发布你的整个代码吗

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#photoStripe {
width:100%;
height:286px;
text-align:center;
overflow:hidden;
background:url(wallpaper.jpg);
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){

$('#photoStripe').css({backgroundPosition:"0 0"});

$('a.moveLeft').click(function(){
    $('#photoStripe').stop().animate({backgroundPosition:'-=200px 0'}, {duration:500});
});
$('a.moveRight').click(function(){
    $('#photoStripe').stop().animate({backgroundPosition:'+=200px 0'}, {duration:500});
});

});
</script>
</head>
<body>
<a href="#" class="moveLeft">moveLeft</a>
<a href="#" class="moveRight">moveRight</a>
<div id="photoStripe">
</div>
</body>
</html>

告诉我，我会尽力帮忙的:)

干杯

【讨论】：

谢谢格雷戈里！！我获取了您的代码并逐步添加了我页面上的其他代码并发现了问题。这是因为我正在调用背景位置插件。显然它不做增量动画，更适合翻转效果，以及任何你同时动画 x 和 y 位置的东西。