.animate () не работает?

Question

не удается сделать анимированное положение моего фонового изображения

$(function() {
$('#nav1').bind('click',function(event){
        $('ul.nav').stop().animate({backgroundPosition: 'right top'}, 1000); 
});
    $(function() {
    $('#nav2').bind('click',function(event){
            $('ul.nav').stop().animate({backgroundPosition: 'right 38px'}, 1000); 
});
    $(function() {
    $('#nav3').bind('click',function(event){
            $('ul.nav').stop().animate({backgroundPosition: 'right 76px'}, 1000); 
});
    $(function() {
    $('#nav4').bind('click',function(event){
            $('ul.nav').stop().animate({backgroundPosition: 'right 114px'}, 1000); 
});

, а HTML-код равен

<ul class="nav">
<li><a href="#what"  id="nav1">what</a></li>
<li><a href="#who" id="nav2">who</a></li>
<li><a href="#portfolio" id="nav3">portfolio</a></li>
<li><a href="#contact" id="nav4">contact</a></li>
</ul>

Я пытался не использовать такие пиксели, как этот {backgroundPosition: '0 38'} но он все еще не оживляет, он просто изменил позицию

, и есть еще одна проблема.Я повторяю код jquery для каждого элемента в меню, не могли бы вы сделать это в одной функции, позиция смещается на 38 пикселей по вертикали для каждого элемента.спасибо,

Answer 1

Это не вы.

jQuery изначально не поддерживает анимацию положения фона.Тем не менее, есть замечательный плагин: http://www.protofunc.com/scripts/jquery/backgroundPosition/

И вот функция, которую вы просили:

$(function() {
    $('ul.nav a').each(function(i, elem) {
        $(elem).bind('click', function(event) {
            event.preventDefault();
            var offset = i * 38;
            $(this).stop().animate({backgroundPosition: '0 ' + offset + 'px'}, 1000); 
        });
    });
});

Answer 2

'right 38px' не является допустимым значением background-position. Исправьте это, и оно должно работать.

Answer 3

Я бы рекомендовал использовать CSS3 переходы и jQuery.CSS () для запуска перехода.