jQuery-Fade-Stop-Fehler: jQuery (".box"). Stop(). FadeIn();

Question

Dieser Code funktioniert nicht, was mache ich falsch?

Tnks.

var x; 
    x=jQuery(document); 
    x.ready(inicializarEventos); 

    function inicializarEventos() 
    { 
     var x; 
     x=jQuery(".Caja2"); 
     x.hover(entraMouse,saleMouse); 
    } 


    function entraMouse() 
    { 
     jQuery(".Caja2").stop().fadeOut(); 
    } 

    function saleMouse() 
    { 
     jQuery(".Caja2").stop().fadeIn(); 
    } 

Answer 1

Dreas Grech aus den Kommentaren ist korrekt. Sie müssen prüfen, ob das Element animiert wird, bevor Sie die Methode .stop() aufrufen. Versuchen Sie folgendes:

function entraMouse() { jQuery(".Caja2:animated").stop();jQuery(".Caja2").fadeOut(); } 
function saleMouse() {jQuery(".Caja2:animated").stop();jQuery(".Caja2").fadeIn(); } 

Answer 2

Es scheint (mir), dass Sie eine Box haben wollen, das wird ausgeblendet, wenn die Maus darüber positioniert ist, und wird erneut angezeigt, wenn die Maus weg bewegt wird. Das ist wirklich kniffliger, als es zunächst erscheint.

Wenn Sie $().fadeOut() aufrufen, was passiert, ist jQuery animiert die Fade und setzt dann display: none auf diesem Element. Da das Element dann aus der Anzeigeliste entfernt wird, wird das mouseOut-Ereignis ausgelöst, wodurch natürlich der fadeIn() -Effekt beginnt. Dies führt zu einer Endlosschleife von mouseIn und mouseOut Ereignissen, solange sich Ihre Maus in diesem Bereich befindet.

Was Sie vielleicht ausprobieren möchten, ist die $().fadeTo() Methode. Im folgenden Beispiel animiere ich die opacity-Eigenschaft auf 0.0, wenn die Maus eintritt, und zurück auf 1.0, wenn die Maus geht. Da das Element nie wirklich versteckt (nur unsichtbar) ist, kann das Ereignis mouseOut korrekt ausgelöst werden.

jQuery(document).ready(inicializarEventos); 

function inicializarEventos() { 
    $(".Caja2").hover(entraMouse, saleMouse);   
} 

function entraMouse() { 
    jQuery(this).fadeTo("slow", 0.0) 
} 

function saleMouse() { 
    jQuery(this).fadeTo("slow", 1.0) 
} 

In Zukunft würde ich vorschlagen zu erklären, warum Sie denken, dass "der Code nicht funktioniert". Sie müssen definieren, wie Sie erwarten, dass der Code funktioniert und was das aktuelle Ergebnis ist. Das wird mir anderen helfen, besser zu wissen, wie man deine Frage beantwortet.