Share the bug about continuous triggering, lagging and repeated execution of animations such as animate, slide, and fade in jQuery, jqueryanimate

Share the bug about continuous triggering, lagging and repeated execution of animations such as animate, slide, and fade in jQuery, jqueryanimate

The style of my article is that I like to start with a question:

This is because I recently want to make an operation option for calling out, and then I thought of the method to hide it by default and display it when I move the mouse over it.

At the beginning, I planned to add a class = "active" and directly trigger the "add" and "remove" When mouseover (or mouseenter) is triggered. This solution is very simple and practical, however, the experience may not be so cool (well, the word is used, and it feels so low in an instant), so I thought of using the jQuery animations such as animate or slide, then I started to talk about the truth. This plug-in was written by myself and encountered some problems, which were not very well implemented (after all, js was not very well mastered). Then I listened to my colleagues to look for jquery, you can directly reference it after import.

(Fortunately, I didn't generate a special effect. The first reaction was to find a plug-in on the Internet. Speaking of this, I also thought of the solution that I met a few days ago about rolling the table header to the interface and fixing it. After a few days, I uploaded it and told you the truth, I did not find a proper solution after finding a circle on the Internet. Finally, I thought of a solution, but I still had a sense of achievement. Although it may not be the best solution)

Back to the topic, I found a circle on the Internet to tell the truth. Other people's plug-ins did a great job, and the compatibility under various browsers was also solved, but I personally, it is only used on two or three pages, and you have to import files (this does not seem to be particularly troublesome), but also use other people's services. In the end, there is no sense of accomplishment.

Then, I wrote it by myself. Although it took some time and encountered some problems, it was still good. The problem was finally solved, at least I am familiar with several built-in functions of jQuery.

Ps: finally, after I find the solution myself, I tried Baidu again. Well, the first webpage link that came out is the method I used.

Bug reproduction: It seems too troublesome to create an animation. Let's go to the code and know what the problem is like without looking at the animation; if you do not know the problem, copy the code first and try it.

PS: the following uses the animation as an example.

<! DOCTYPE html> 
The above code commented out the stop () method, which I personally think is the most perfect solution and has not been commented out. It was after I went to Baidu, another solution mentioned by others, but I personally don't feel very perfect. I will mention the difference later.
First,

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


These two statements of Code do not have the filter () function, that is, the code when this bug was first encountered.
The cause of this bug is that the event is generated within a short period of time (the previous animation has not been fully played), and the animation accumulation is caused (it is estimated that this problem occurs when you look back at the code to know the cause ). Therefore, there are two solutions.
[Filter]
One is to use filter to filter out the animation elements before the animation occurs. Only the elements that have ended the previous animation can trigger a new event.
Then this brings about a new problem. When I move the mouse over the corresponding content, the mouseover event is triggered. At this time, when the animation is not over, the mouseleave event is triggered when I move the mouse away from the corresponding content area. However, even if the previous animation has not ended, the expected function is not executed, in this case, the expected "mouseleave event triggering, content hiding" results cannot be achieved.
Of course, if the operator stays on the corresponding content before the animation triggered by the mouseover event ends, this solution will not be affected.
[Stop]
For stop (), although everyone knows this, move it again.
// Syntax structure $ ("# div "). stop (); // stop the current animation and continue the next animation $ ("# div "). stop (true); // clear all animations of an element $ ("# div "). stop (false, true); // get the current animation to its final state and continue the next animation $ ("# div "). stop (true, true); // clear all animations of the element so that the current animation reaches the final state.


The idea of this solution is simple: When I mouseover, I trigger the corresponding animation, but when the animation is not over, I need mouseleave and trigger the corresponding animation of mouseleave, at this time, I need to stop the animation of the corresponding element. Then, the bug does not exist.
Finally, well, there seems to be nothing to summarize in this article. In fact, I am familiar with animation functions like animate, slide, and fade, at the same time, I am familiar with the difference between the stop parameter and the non-parameter (true, I didn't expect to use the stop at the beginning. after a day or two, when I accidentally saw the API, I saw the stop, the idea of using stop to solve this bug suddenly exists ).
The above is a bug about continuous triggering and lagging execution of animations such as animate, slide, and fade in jQuery. I hope it will help you in your future work and study.
Articles you may be interested in:

 

 
  
JQuery animate effect demonstration
 
  
Jquery animation effect instructions
 
  
Simulation of jquery's animate Custom Animation (2.5 K) implemented by js)
 
  
Solve the Problem of jquery's. animate () function under IE6.
 
  
How to Use jQuery animation Animation
 
  
Jquery animate enables you to move the mouse up and show off the hidden Effect
 
  
How to solve animate animation accumulation in jquery
 
  
Examples of jQuery animation effects combination of animate and scrollTop
 
  
How to Use the stop method of JQuery animation animate
 
  
Use jquery animate to create a smooth scroll effect (it can be at the top, to the bottom, or a specified place)
 
  
Example of how to use the animate () method in jQuery
 
  
The stop () method of animate in jquery is used for instance analysis.
 
  
Jquery uses the animate method to move control elements
 
  
Js implementation method similar to the animation effect in jquery
 
  
The second click event of the animation in jQuery does not respond.