用jQuery增量背景位置动画

我有一个100％宽，284px高的div，叫做#photoStripe，背景图片宽度为5000px。然后在左侧和右侧的导航按钮上方。这个想法是能够左右平移，通过左右增量动画背景图像。用jQuery增量背景位置动画

我使用的是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); 
}

来源

2011-01-27 inorganik

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

让我知道，我会尽力帮助:)

干杯

来源

2011-01-27 00:18:31

谢谢！格雷戈里我把你的代码和增量添加了我的页面上的其他代码，并发现问题。这是因为我正在调用背景位置插件。显然，它不会增量动画，更适合翻转效果，以及任何您在同时对x和y位置进行动画处理的场合。 – inorganik 2011-01-27 16:06:16

用jQuery增量背景位置动画

回答

相关问题