Incremental background position animation with jQuery_问答_开发者

Incremental background position animation with jQuery

开发者 https://www.devze.com 2023-02-06 18:56 出处：网络

I\'ve got a 100% wide and 284px high div called #photoStripe with a 5000px wide background image. Then left and right nav buttons over it. The idea is to be able to pan left an right, by animating the

I've got a 100% wide and 284px high div called #photoStripe with a 5000px wide background image. Then left and right nav buttons over it. The idea is to be able to pan left an right, by animating the background image incrementally left and right.

I'm using the popular background position plugin, which allows you to animate the x and y values of the background position simultaneously.

Well, the background animates, but it only does once. (Can't click again and again).Any ideas?

jQuery:

$('#photoStripe').css({backgroundPositi开发者_高级运维on:"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);
}

It seems fine in FF when I'm checking this code, here's my code, are you sure you have everything there? Could you post your whole code pls

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

Let me know, I'll try to help :)

Cheers