suchen

Heim  >  Artikel  >  Web-Frontend  >  Teilen Sie den bug_jquery über das kontinuierliche Auslösen und Verzögern von Animationen wie Animieren, Schieben und Einblenden in jQuery

Teilen Sie den bug_jquery über das kontinuierliche Auslösen und Verzögern von Animationen wie Animieren, Schieben und Einblenden in jQuery

WBOY
WBOYOriginal
2016-05-16 15:20:341974Durchsuche

Mein Stil beim Schreiben von Artikeln besteht darin, dass ich am Anfang gerne über die Hintergründe des Problems und den Rechtsschaden spreche:

Da ich kürzlich die Bedienoptionen aufrufen wollte, habe ich mir überlegt, sie standardmäßig auszublenden und anzuzeigen, wenn die Maus darüber fährt.

Zuerst hatte ich geplant, eine Klasse = „aktiv“ hinzuzufügen, die beim Mouseover (oder Mouseenter) direkt das Hinzufügen auslöst und beim Mouseout (oder Mouseleave) entfernt. Diese Lösung ist sehr einfach und praktisch, aber die Erfahrung ist möglicherweise nicht der Fall Es ist cool (ok, ich habe dieses Wort verwendet und es fühlte sich sofort so niedrig an), also dachte ich darüber nach, jQuery-Animationen wie Animate oder Slide zu verwenden, und um ehrlich zu sein, wenn Sie dieses Plug-In schreiben Sie selbst werden auf einige Probleme stoßen, daher ist es nicht sehr einfach zu implementieren (schließlich beherrsche ich js nicht sehr gut), und dann habe ich meinen Kollegen zugehört, Jquery gefunden und es direkt nach dem Import zitiert.

(Glücklicherweise habe ich nicht die Angewohnheit, online nach Plug-Ins zu suchen, wenn ich einen bestimmten Spezialeffekt erzielen möchte. Wenn ich darüber spreche, denke ich auch an das, was mir vor ein paar Tagen beim Scrollen begegnet ist Tabellenüberschrift auf der Benutzeroberfläche wurde behoben und wird in ein paar Tagen hochgeladen. Ehrlich gesagt habe ich im Internet nach dieser Methode gesucht, konnte aber keine passende Lösung finden Lösung selbst, was durchaus zufriedenstellend ist, obwohl es möglicherweise nicht die beste Lösung ist)

Zurück zum Thema, ich habe mich ehrlich gesagt im Internet umgesehen, die Plug-Ins anderer Leute sind wirklich gut und die Kompatibilität unter verschiedenen Browsern wurde auch gelöst. Ich persönlich verwende jedoch nur zwei oder drei Plug-Ins -ins. Die Seite wird verwendet und die Datei muss importiert werden (dies scheint nicht besonders problematisch zu sein) und sie muss von jemand anderem verwendet werden. Schließlich gibt es kein Erfolgserlebnis.

Dann habe ich es endlich selbst geschrieben und es gab einige Probleme, aber das Problem wurde endlich gelöst.

ps: Eine letzte Sache noch: Nachdem ich die Lösung selbst gefunden hatte, habe ich erneut nach Baidu gesucht. Nun, das Klicken auf den ersten Weblink, der angezeigt wurde, war die Methode, die ich verwendet habe.

Fehlerwiederholung: Ich wollte ursprünglich eine Animation erstellen, aber es scheint zu mühsam zu sein, also schreiben wir den Code. Wer dieses Problem kennt, sollte wissen, wo das Problem liegt, ohne sich die Animation anzusehen Problem, Sie können zunächst den Code kopieren und ausprobieren.

PS: Im Folgenden wird eine animierte Animation als Beispiel genommen

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>test</title>
<meta charset="utf-8">
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css">
<script src="./bootstrap/js/jquery-1.11/jquery.min.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div style="width:70%;margin:50px auto;height:300px;">
<div id="test" style="width:900px;height:100px;border:1px solid red;overflow:hidden;">
<div class="test" style="margin-left:-6em">
<a>
测试用的文字
<i class="fa fa-arrow-right"></i>
</a>
</div>
</div>
</div>
<script>
$("[data-toggle='tooltip']").tooltip();

$("#test").on("mouseover",function(){
var $this = $(this);
var $thisTest = $this.find("div.test");
$thisTest.css("position","relative");
// $thisTest.stop();
$thisTest.filter(':not(:animated)').animate({marginLeft:"0em"});
})
.on("mouseout",function(){
var $this = $(this);
var $thisTest = $this.find("div.test");
$thisTest.css("position","relative");
// $thisTest.stop();
$thisTest.filter(':not(:animated)').animate({marginLeft:"-6em"});
})
//连续触发动画bug
//不允许动画累积；或是在新的动画开始前，先停止当前正在进行的动画
</script>
</body>
</html>

Im obigen Code wurde die stop()-Methode meiner Meinung nach auskommentiert. Diejenige, die nicht auskommentiert wurde, wurde von anderen erwähnt, nachdem ich sie auf Baidu durchsucht hatte Eine Lösung, aber ich persönlich denke nicht, dass sie besonders perfekt ist. Ich werde den Unterschied später erwähnen.

Am Anfang, 

$thisTest.filter(':not(:animated)').animate({marginLeft:"0em"});
$thisTest.filter(':not(:animated)').animate({marginLeft:"-6em"});

Diese beiden Codezeilen haben keine filter()-Funktion, so sah der Code aus, als ich zum ersten Mal auf diesen Fehler stieß.

Die Ursache für diesen Fehler liegt in der Anhäufung von Animationen in kurzer Zeit (die vorherige Animation wurde noch nicht zu Ende abgespielt) (Ich denke, wenn Sie auf dieses Problem stoßen, werden Sie diesen Grund kennen, wenn Sie sich das noch einmal ansehen Code). Daher gibt es zwei Lösungen.

【Filter】

Eine besteht darin, den Filter zu verwenden, um die Elemente herauszufiltern, die animiert werden, bevor die Animation auftritt, sodass nur die Elemente, deren vorherige Animation beendet wurde, neue Ereignisse auslösen können.

Dann bringt dies ein neues Problem mit sich, das das Mouseover-Ereignis auslöst. Zu diesem Zeitpunkt entferne ich die Maus außerhalb des entsprechenden Inhaltsbereichs ausgelöst, aber da die vorherige Animation nicht beendet wurde, wird die erwartete Funktion nicht ausgeführt, selbst wenn das Ereignis ausgelöst wird. Zu diesem Zeitpunkt kann das erwartete Ergebnis von „Mouseleave-Ereignis wird ausgelöst und der Inhalt wird ausgeblendet“ nicht erreicht.

Wenn der Bediener die Maus auf dem entsprechenden Inhalt hält, bevor die durch das Mouseover-Ereignis ausgelöste Animation endet, hat diese Lösung natürlich keine Auswirkungen.

【Stopp】

Was stop() betrifft, obwohl ich weiß, dass das jeder weiß, verschieben wir es noch einmal. 

//语法结构
$("#div").stop();//停止当前动画，继续下一个动画
$("#div").stop(true);//清除元素的所有动画
$("#div").stop(false, true);//让当前动画直接到达末状态 ，继续下一个动画
$("#div").stop(true, true);//清除元素的所有动画，让当前动画直接到达末状态

Die Idee dieser Lösung ist einfach: Wenn ich mit der Maus darüber fahre, wird die entsprechende Animation ausgelöst, aber bevor die Animation vorbei ist, möchte ich die Maus verlassen und gleichzeitig die entsprechende Animation auslösen , Ich muss die laufende Animation des entsprechenden Elements stoppen. Dann ist der Fehler nicht mehr vorhanden.

Abschließend, okay, dieser Aufsatz scheint keine Zusammenfassung zu haben. Tatsächlich geht es nur darum, sich mit den Animations-, Schiebe- und Fade-Animationsfunktionen vertraut zu machen und sich gleichzeitig mit dem Unterschied zwischen Stopp mit und ohne Parameter vertraut zu machen Parameter (um ehrlich zu sein, am Anfang gab es keinen Parameter) Ich dachte darüber nach, Stop zu verwenden. Ein oder zwei Tage später, als ich zufällig die API sah, kam mir plötzlich die Idee, Stop zu verwenden Verwenden Sie Stop, um diesen Fehler zu beheben.

Das Obige ist der Herausgeber von Script House, der Ihnen die Fehler bezüglich der kontinuierlichen Auslösung und Verzögerung der wiederholten Ausführung von Animationen, Slides, Fades und anderen Animationen in jQuery mitteilt. Ich hoffe, dass dies für alle bei Ihrer zukünftigen Arbeit hilfreich sein wird Studie.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der Verwendung der Funktion get_current_screen() in WordPress-Entwicklung_Javascript-KenntnissenNächster Artikel：Detaillierte Erläuterung der Verwendung der Funktion get_current_screen() in WordPress-Entwicklung_Javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen