Div фоновая смена при зависании другого div с jQuery

Question

Я пытаюсь заставить это работать, но я очень мало знаю о jQuery.

Когда пользователь наводил кнопку «div» на div, положение фона «слайд» div должно меняться от «0 0» до «0 -89px», в то время как перемещение мыши в другую точку должно сбросить положение фона до «0 0».

Вот код (переработанный из другого вопроса на StackOverflow):

$(document).ready(function(){ 
    $('#button').hover(function(){ 
     $('#slide').css('backgroundPosition', newValue); 
    }, function(){ 
     $('#slide').css('backgroundPosition', '0 -89px'); 
    }); 
}); 

Мой HTML:

<div id="container"> 
     <div id="slide"></div> 
     <div id="button">Click me!</div> 
</div> 

Мой CSS:

div#slide { 
    background: url(base_slide.png) no-repeat; 
    width: 629px; 
    height: 89px; 
    background-position: 0px 0px; 
} 

Это работает, но не как ожидалось , Когда я нажимаю кнопку div, ничего не происходит, но если я перемещаю мышь в другую точку, весь код работает, а фон меняется.

Уверен, что есть возможность исправить это, но я только вчера начал исследовать некоторые jQuery. Также я не знаю, как сбросить положение фона до 0 0.

Не могли бы вы мне помочь?

Answer 1

Я думаю, что var newValue следует заменить на '0 0'. Если я правильно понимаю ваши потребности.

Проверить этот пример: http://jsfiddle.net/VBEaQ/1/

Update: Вот полный пример с FadeIn FADEOUT эффект ;-)

$(document).ready(function(){ 
    $('#button').hover(function(){ 
     $('#slide').stop().fadeOut(function(){ 
      $(this).css('backgroundPosition', '0 -89px'); 
     }).fadeIn(); 
    }, function(){ 
     $('#slide').stop().fadeOut(function(){ 
      $(this).css('backgroundPosition', '0 0'); 
     }).fadeIn(); 
    }); 
});​ 

Живая демонстрация: http://jsfiddle.net/VBEaQ/9/

Answer 2

вы должны попытаться определить многократные css-атрибуты и значения вместо 1 функции = 1 метод css, который вы используете. Документация jquery должна помочь .. также его фоновое положение, а не backgroundPosition.