Div Hintergrund ändern, wenn ein anderes div mit jQuery schwebt

Question

Ich versuche, dies funktioniert, aber ich weiß sehr wenig von jQuery.

Wenn ein Benutzer auf dem div "button" schwebt, muss die Hintergrundposition des div "slides" von "0 0" auf "0 -89px" geändert werden, während das Bewegen der Maus zu einem anderen Punkt die Hintergrundposition auf zurücksetzen muss "0 0".

, dass der Code ist (aus einer anderen Frage auf Stackoverflow recycelt):

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

Mein HTML:

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

Meine CSS:

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

Es funktioniert, aber nicht wie erwartet . Wenn ich auf den Knopf div schweben passiert nichts, aber wenn ich meine Maus zu einem anderen Punkt bewegen, funktioniert der Code und der Hintergrund ändert sich.

Ich bin sicher, dass es eine Möglichkeit gibt, das zu beheben, aber ich habe gerade angefangen, einige jQuery zu erkunden. Ich weiß auch nicht, wie man die Hintergrundposition auf 0 zurücksetzt.

Könnten Sie mir bitte helfen?

Answer 1

Ich denke, dass der var newValue durch '0 0' ersetzt werden sollte. Wenn ich deine Bedürfnisse richtig verstehe.

prüfen dieses Beispiel: http://jsfiddle.net/VBEaQ/1/

Update: Hier ist ein vollständiges Beispiel mit fadeIn fadeOut Effekt ;-)

$(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(); 
    }); 
});​ 

Live-Demo: http://jsfiddle.net/VBEaQ/9/

Answer 2

Sie sollten versuchen, mehrere zu definieren CSS-Attribute und -Werte anstelle von 1 Funktion = 1 CSS-Methode, die Sie verwenden. Die jquery Dokumentation sollte helfen .. auch seine Hintergrund-Position nicht backgroundPosition.