Добавочная анимация положения фона с помощью jQuery - PullRequest
Новая
       33

Добавочная анимация положения фона с помощью jQuery

1 голос
/ 27 января 2011

Я получил 100% ширину и высоту в 284 пикселя под названием #photoStripe с фоновым изображением шириной 5000 пикселей. Затем левую и правую навигационные кнопки над ним. Идея состоит в том, чтобы иметь возможность панорамирования влево и вправо, анимируя фоновое изображение влево и вправо.

Я использую популярный плагин фоновой позиции , который позволяет одновременно анимировать значения 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);
}

1 Ответ

0 голосов
/ 27 января 2011

Кажется, в 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>

Дайте мне знать, я постараюсь помочь:)

Ура

G.

...