使用jQuery的增量背景位置动画_Jquery_Jquery Animate_Background Position

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

jquery

使用jQuery的增量背景位置动画,jquery,jquery-animate,background-position,Jquery,Jquery Animate,Background Position,我有一个100%宽，284px高的div，叫做#phototripe，有一个5000px宽的背景图像。然后左右导航按钮在上面。这样做的目的是能够左右平移，通过增加背景图像的左右动画来实现我正在使用，它允许您同时设置背景位置的x和y值的动画嗯，背景动画，但它只做一次。（无法反复单击）。有什么想法吗 jQuery： $('#photoStripe').css({backgroundPosition:"0 0"}); $('a.moveLeft').click(function(){ $

我有一个100%宽，284px高的div，叫做#phototripe，有一个5000px宽的背景图像。然后左右导航按钮在上面。这样做的目的是能够左右平移，通过增加背景图像的左右动画来实现

我正在使用，它允许您同时设置背景位置的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:

在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>


#照相底片{
宽度：100%；
高度：286px；
文本对齐：居中；
溢出：隐藏；
背景：url（wallpaper.jpg）；
}
$（函数（）{
$（'#phototripe'）.css（{backgroundPosition:“0”}）；
$（'a.moveLeft'）。单击（函数（）{
$（#phototripe'）.stop（）.animate（{backgroundPosition:'-=200px 0'}，{duration:500}）；
});
$（'a.moveRight'）。单击（函数（）{
$（#phototripe'）.stop（）.animate（{backgroundPosition:'+=200px 0'}，{duration:500}）；
});
});

让我知道，我会尽力帮助：）

干杯

谢谢你，格雷戈里！！我获取了您的代码，并在我的页面上添加了其他代码，发现了问题。这是因为我调用了后台位置插件。显然，它不做增量动画，更适合于滚动效果，以及同时设置x和y位置动画的任何情况。

<!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>