Animation wird zurückgesetzt, wenn die Maus über die Schaltfläche bewegt wird, aber bewegt sich

Question

Ich bin neu im Web entwickeln und habe keine Lösung dafür gefunden. Ich habe eine kleine Website mit einem Wort gemacht, dass, wenn die Maus darüber schwebt, ein Bild nach unten rutscht, während es eingeblendet wird, und wenn Sie das Wort verlassen, rutscht es wieder hoch und verschwindet.

Das Problem ist, dass, wenn ich den Mauszeiger über das Wort halte und die Animation läuft, wenn ich die Maus leicht bewege, während ich immer noch über dem Wort schwebe, kehrt die Animation um. Also im Grunde bin ich auf dem Wort, das Bild rutscht runter, ich bewege mich leicht (aber immer noch drauf), das Bild geht wieder hoch. Das bedeutet, dass das Bewegen der Maus über ein Wort diese seltsame Ruckbewegung mit dem Bild macht, wo es ein paar Mal auf und ab geht, bis Sie das Wort verlassen haben.

Ich würde gerne ein einfaches Beispiel für etwas ähnliches, wo bewegen Sie die Maus auf das Wort, während Sie bereits darauf, nicht die Animation beeinflussen, und haben es nur umgekehrt, wenn die Maus vollständig davon ist.

Vielen Dank, wenn Sie Fragen haben, fragen Sie uns!

Answer 1

Sie können dies tun:

$("#element").mouseover(function() { 
     //Animate in 
    }); 
    $("#element").mouseleave(function() { 
     //Animate out 
     }); 

Css (nicht zu stabil in CSS, aber ich denke, Sie so etwas wie dies tun können):

.object{ 
top:0; 
animation-duration: 4s; 
} 
    .element:hover ~ .object{ 
    top:50px; 

}