DIV背景变化徘徊与jQuery另一个DIV时(Div background change when

我试图得到这个工作，但我知道很少的jQuery。

当用户将鼠标悬停在格“键”在div“滑动”的背景的位置，必须从“0 0”到“0 -89px”改变，而鼠标移动到另一点必须重置背景位置为“0 0” 。

这是代码（从计算器另一个问题再生纸）：

    $(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。

请问你能帮帮我吗？

Answer 1:

我认为VAR NEWVALUE应该由“0”代替。如果我正确地了解您的需求。

检查这个例子： http://jsfiddle.net/VBEaQ/1/

更新：这里是淡入淡出效果，一个完整的示例;-)

$(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/