jQuery-Ereignis-Mouseover und Mouseout-Ereignisverzögerung lösen ein Problem aus, wenn Sie sich schnell bewegen

Schauen wir uns zunächst einen Code an:

<span style="font-family:SimHei;font-size:14px;">$(document).ready(function(){

    $("p.p1").mouseover(function()

       {$("p.p2").animate({bottom:&#39;10px&#39;},1000);})

    $("p.p1").mouseout(function()

       {$("p.p2").animate({bottom:&#39;-50px&#39;},1000);}
    )
});</span>

Der obige Code ist sehr einfach. Der Grund, warum ich Hover nicht verwendet habe. ) Ich habe es geschrieben, weil ich die Code-Ideen klarer und verständlicher machen möchte! Der dadurch erzielte Effekt besteht darin, dass die Maus auf p mit der Klasse „p1“ platziert wird und der untere Wert von p mit der Klasse „p2“ „10 Pixel“ beträgt. Wenn Sie die Maus wegbewegen, wird ihr Wert „-50“ Pixel. Es ist der Effekt, wenn ich die Klasse p2 nach oben und unten bewege, aber wenn ich die Maus schnell auf das p mit der Klasse p1 setze und mich dann schnell wegbewege und dies mehrmals wiederhole, dann wirst du feststellen, dass das p mit der Klasse p2 ist Hier hört es nicht auf. Zu diesem Zeitpunkt hat meine Maus aufgehört, sich zu bewegen , ich habe darüber nachgedacht, stattdessen Ihr ursprüngliches Mouseover zu verwenden, damit nach dem ersten Auslöseereignis eine wiederholte Bewegung im Objektbereich es nicht mehr auslöst Verwenden Sie :not(:animated), um zu beurteilen, ob das aktuelle Objekt eine Aktion ausführt. Ich habe auch an preventDefault(); gedacht. Die Ergebnisse wurden nacheinander überprüft und implementiert. aber die Wirkung ist immer noch nicht ideal und einige haben noch keine Ergebnisse gebracht. . . . . Schließlich dachte ich an stop() von jQuery. Seine Funktion besteht darin, die aktuell laufende Animation

zu stoppen, solange die aktuell laufende Stoppen Sie die laufende Animation, bewegen Sie sie dann nach oben und unten und schreiben Sie dann den folgenden Code:

<span style="font-family:SimHei;font-size:14px;">$(&#39;p.p1&#39;).hover(
function() {
$("p.p2").stop().animate({bottom:&#39;10px&#39;},1000);})
},
function() {
$("p.p2").stop().animate({bottom:&#39;-50px&#39;},1000);}
}
);</span>

Dadurch besteht das Problem der verzögerten Auslösung der Mouseover- und Mouseout-Ereignisse von jQuery, wenn schnelle Bewegungsereignisse ausgelöst werden, und der Animationseffekt ist sehr freundlich und großartig!

Wenn das schnelle Bewegungsereignis verzögert wird, wird das Problem ausgelöst

Wenn das schnelle Bewegungsereignis verzögert wird, Das Problem wird ausgelöst

Verzögerung des Bewegungsereignisses

Das obige ist der detaillierte Inhalt vonjQuery-Ereignis-Mouseover und Mouseout-Ereignisverzögerung lösen ein Problem aus, wenn Sie sich schnell bewegen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!