Web Front-end
JS Tutorial
Share bugs about the continuous triggering, lagging and repeated execution of animate, slide, fade and other animations in jQuery_jquery
Share bugs about the continuous triggering, lagging and repeated execution of animate, slide, fade and other animations in jQuery_jquery
May 16, 2016 pm 03:20 PM
My style of writing articles is that I like to talk about the background of the problem and legal injury at the beginning:
Because I recently wanted to call out the operation options, I thought of hiding it by default and displaying it when the mouse moves over it.
At first I planned to add a class="active", which will directly trigger add when mouseover (or mouseenter), and remove when mouseout (or mouseleave). This solution is very simple and practical, but the experience may not be that good. It’s cool (ok, I used this word, and it felt so low instantly), so I thought of using jQuery animations like animate or slide, and to be honest at the beginning, if I write this plug-in myself, I will encounter some problems, so it’s not very It’s easy to implement (after all, my mastery of js is not very good), and then I listened to my colleagues and found jquery, and just quoted it directly after importing it.
(Fortunately, I don’t have the habit of looking for plug-ins online when I want to do a certain special effect. Speaking of this, I also thought about what I encountered a few days ago about scrolling the table header in the interface. The solution has been fixed, and it will be uploaded in a few days. To be honest, I searched around the Internet for that method but couldn’t find a suitable solution. Finally, I came up with a solution myself, which is quite satisfying, although it may not be the best solution. Excellent solution)
Back to the topic, I searched around on the Internet. To be honest, other people’s plug-ins are really good, and the compatibility under various browsers has also been solved. However, personally, I only use two or three plug-ins. The page is used, and the file needs to be imported (this doesn't seem to be particularly troublesome), and it needs to be used by someone else. After all, there is no sense of accomplishment.
Then, I finally wrote it myself. Although it took some time and encountered some problems, it was still good. The problem was finally solved. At least I became more familiar with several jQuery built-in functions.
ps: One last thing to add, after I found the solution myself, I searched Baidu again. Well, clicking on the first web link that came out was the method I used.
Bug recurrence: I originally wanted to make an animation, but it seems too troublesome, so let’s write the code. Those who know this problem should know what the problem is without looking at the animation; those who don’t know this problem, you can first Copy the code and try it out.
PS: The following takes animate animation as an example
<!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"});
})
//連續(xù)觸發(fā)動畫bug
//不允許動畫累積；或是在新的動畫開始前，先停止當(dāng)前正在進(jìn)行的動畫
</script>
</body>
</html>
In the above code, the stop() method was commented out by me. It is the most perfect solution in my opinion. The one that was not commented out was another one mentioned by others after I searched it on Baidu. It’s a solution, but I personally don’t think it’s particularly perfect. I’ll mention the difference later.
In the beginning,
$thisTest.filter(':not(:animated)').animate({marginLeft:"0em"});
$thisTest.filter(':not(:animated)').animate({marginLeft:"-6em"});
These two lines of code do not have a filter() function, which is what the code looked like when I first encountered this bug.
The cause of this bug is caused by the accumulation of animations in a short period of time (the previous animation has not finished playing) (I guess if you encounter this problem, you will know this reason if you look back at the code). Therefore, there are two solutions.
【filter】
One is to use filter to filter out the elements that are being animated before the animation occurs, so that only the elements whose previous animation has ended can trigger new events.
Then this brings a new problem. When I move the mouse to the corresponding content, the mouseover event is triggered. At this time, before the animation is over, I remove the mouse outside the corresponding content area. The mouseleave event is triggered, but because the previous animation has not ended, even if the event is triggered, the expected function is not executed. At this time, the expected result of "mouseleave event is triggered and the content is hidden" cannot be achieved.
Of course, if the operator keeps the mouse on the corresponding content before the animation triggered by the mouseover event ends, this solution will not have any impact.
【stop】
As for stop(), although I know that everyone knows it, let’s move it again.
//語法結(jié)構(gòu)
$("#div").stop();//停止當(dāng)前動畫，繼續(xù)下一個動畫
$("#div").stop(true);//清除元素的所有動畫
$("#div").stop(false, true);//讓當(dāng)前動畫直接到達(dá)末狀態(tài) ，繼續(xù)下一個動畫
$("#div").stop(true, true);//清除元素的所有動畫，讓當(dāng)前動畫直接到達(dá)末狀態(tài)
The idea of ??this solution is simple: when I mouseover, the corresponding animation is triggered, but before the animation is over, I want to mouseleave, and at the same time trigger the animation corresponding to mouseleave. At this time, I need to stop The ongoing animation of the corresponding element. Then, the bug will no longer exist.
Finally, okay, this essay seems to have no summary. In fact, it is just familiarity with the animate, slide, and fade animation functions. At the same time, I am also familiar with the difference between stop with parameters and without parameters (to be honest, there was no parameter at the beginning). I thought of using stop. A day or two later, when I accidentally saw the API, I saw stop, and then I suddenly came up with the idea of ??using stop to solve this bug).
The above is what the editor of Script House shared with you about the bugs of continuous triggering and delayed repeated execution of animations such as animate, slide, and fade in jQuery. I hope it will be helpful to everyone in your future work and study.
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Java vs. JavaScript: Clearing Up the Confusion
Jun 20, 2025 am 12:27 AM
Java and JavaScript are different programming languages, each suitable for different application scenarios. Java is used for large enterprise and mobile application development, while JavaScript is mainly used for web page development.
Javascript Comments: short explanation
Jun 19, 2025 am 12:40 AM
JavaScriptcommentsareessentialformaintaining,reading,andguidingcodeexecution.1)Single-linecommentsareusedforquickexplanations.2)Multi-linecommentsexplaincomplexlogicorprovidedetaileddocumentation.3)Inlinecommentsclarifyspecificpartsofcode.Bestpractic
How to work with dates and times in js?
Jul 01, 2025 am 01:27 AM
The following points should be noted when processing dates and time in JavaScript: 1. There are many ways to create Date objects. It is recommended to use ISO format strings to ensure compatibility; 2. Get and set time information can be obtained and set methods, and note that the month starts from 0; 3. Manually formatting dates requires strings, and third-party libraries can also be used; 4. It is recommended to use libraries that support time zones, such as Luxon. Mastering these key points can effectively avoid common mistakes.
Why should you place tags at the bottom of the ?
Jul 02, 2025 am 01:22 AM
PlacingtagsatthebottomofablogpostorwebpageservespracticalpurposesforSEO,userexperience,anddesign.1.IthelpswithSEObyallowingsearchenginestoaccesskeyword-relevanttagswithoutclutteringthemaincontent.2.Itimprovesuserexperiencebykeepingthefocusonthearticl
JavaScript vs. Java: A Comprehensive Comparison for Developers
Jun 20, 2025 am 12:21 AM
JavaScriptispreferredforwebdevelopment,whileJavaisbetterforlarge-scalebackendsystemsandAndroidapps.1)JavaScriptexcelsincreatinginteractivewebexperienceswithitsdynamicnatureandDOMmanipulation.2)Javaoffersstrongtypingandobject-orientedfeatures,idealfor
JavaScript: Exploring Data Types for Efficient Coding
Jun 20, 2025 am 12:46 AM
JavaScripthassevenfundamentaldatatypes:number,string,boolean,undefined,null,object,andsymbol.1)Numbersuseadouble-precisionformat,usefulforwidevaluerangesbutbecautiouswithfloating-pointarithmetic.2)Stringsareimmutable,useefficientconcatenationmethodsf
What is event bubbling and capturing in the DOM?
Jul 02, 2025 am 01:19 AM
Event capture and bubble are two stages of event propagation in DOM. Capture is from the top layer to the target element, and bubble is from the target element to the top layer. 1. Event capture is implemented by setting the useCapture parameter of addEventListener to true; 2. Event bubble is the default behavior, useCapture is set to false or omitted; 3. Event propagation can be used to prevent event propagation; 4. Event bubbling supports event delegation to improve dynamic content processing efficiency; 5. Capture can be used to intercept events in advance, such as logging or error processing. Understanding these two phases helps to accurately control the timing and how JavaScript responds to user operations.
What's the Difference Between Java and JavaScript?
Jun 17, 2025 am 09:17 AM
Java and JavaScript are different programming languages. 1.Java is a statically typed and compiled language, suitable for enterprise applications and large systems. 2. JavaScript is a dynamic type and interpreted language, mainly used for web interaction and front-end development.
