2012-03-21 3 views
1

Я ломаю голову, пытаясь сделать эту работу. Я хочу, чтобы фон моей страницы прокручивался вбок.JQuery: Тело фона прокрутки влево?

<html> 

<script src="http://code.jquery.com/jquery-latest.js"></script> 

<script> 
$(function(){ 
    $("body").animate({backgroundPosition : "500 0"}, 2000); 
}); 
</script> 

<body style="background-image: url('bg.jpg')"> 

</body> 

</html> 
+0

Используйте вместо этого тег «». – Blender

+0

http://stackoverflow.com/questions/4077429/jquery-css-background-position-animation – RTulley

ответ

1

jQuery не может анимировать свойства css, которые принимают 2 или более значений.

Вы можете использовать backgroundPositionY и backgroundPositionX анимировать по вертикали и по горизонтали:

$("body").animate({backgroundPositionY : "500px"}, 2000); 

DEMO

+0

Это работает только в IE. – user1091856

+0

Смотрите: http://advogadosempraiagrande.com.br/test/2.php – user1091856

+0

Работает в хроме для меня, но не в FF действительно ... –

1

Для того, чтобы создать этот эффект во всех браузерах, вы можете попробовать другой подход, как это;

HTML

<body> 
    <div class="background" id="background"></div> 
    <div class="page-content">Put your content here</div> 
</body> 

CSS

.background { 
    background-image:url('bg.jpg'); 
    position:absolute; 
    z-index:1; 
} 
.page-content { 
    z-index:2; 
    position:relative; 
} 

JQuery

$(document).ready(function(){ 
    var windowHeight = $(window).height(); 
    var windowWidth = $(window).width(); 
    var animateWidth = '500'   
    $('#background').height(windowHeight).width(windowWidth) 
    .animate({ 
     left: animateWidth + 'px', 
     width: (windowWidth - animateWidth) + 'px' 
    }, 2000); 
}); 

Вот рабочий пример: http://jsfiddle.net/HHgKW/3/

Смежные вопросы