使用jQueryhover另一个div时Div背景更改

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

当用户在div“按钮”上盘旋时，div“slide”的背景位置必须从“0 0”变为“0 -89px”，而将鼠标移动到另一个点必须将背景位置重置为“0 0” 。

这是代码（从stackoverflow上的另一个问题回收）：

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

我的HTML：

 
 
 
Click me!
  

我的CSS：

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

它有效，但不是预期的。 当我将鼠标hover在按钮上时没有任何反应，但如果我将鼠标移动到另一个点，则所有代码都会正常工作并且背景会发生变化。

我确信有可能解决这个问题，但我昨天刚开始探索一些jQuery。 另外我不知道如何将背景位置重置为0 0。

请问你能帮帮我吗？

Answer 1

我认为var newValue应该替换为’0 0’。 如果我理解你的需要。

查看此示例： http ： //jsfiddle.net/VBEaQ/1/

更新：以下是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个function = 1 css方法。 jquery文档应该有用..还有它的background-position而不是backgroundPosition。