Share about the continuous triggering of animate, slide, fade, and so on in jquery, and the repetitive execution of bug_jquery

I write the style of the article is like to speak at the beginning of the background of the law injury:

Because of the recent call to do an operation option, and then think of the default to hide, the mouse across the time to display the method.

The solution is simple and practical when you start by adding a class= "active" that directly triggers mouseover (or MouseEnter) when add,mouseout (or MouseLeave). But the experience may not be so cool (okay, the word used, instantaneous feeling good low ah), so I thought of using animate or slide these jquery animation, and then the beginning of the truth, the plug-in write their own, will encounter some problems, not too good to achieve (after all, JS Master is not very in place), Then listen to colleagues to find jquery, import directly after the reference can be.

(Luckily, I didn't get into the habit of doing a special effect. The first response is to find plug-ins on the Internet, talking about this, and think of a few days ago on the table in the face of the interface rolling and fixed the solution, a few days passed up, tell the truth, that method online find a lap did not find the right solution, Finally I thought of a method, or a very good sense of achievement, although it may not be the optimal solution

Back to the point, the Internet to find a lap, to tell the truth, other people's plug-ins, do really good, and a variety of browser compatibility also resolved, but I personally, only two or three pages to use, but also import files (this seems to be not particularly troublesome), but also with others, after all, no sense of achievement.

Then, finally, I wrote it, although it took some time, but also encountered some problems, but still good, the problem is finally resolved, at least a few of the built-in functions of jquery are familiar with a bit.

PS: Finally add a sentence, in my own to find solutions, once again Baidu a bit, well, the first page out of the link, point in the way I used.

Bug reproduce: Originally want to do a moving map, it seems too troublesome, or on the code, know this problem should not see the map also know is a how the problem; do not know this problem, you can first copy down the code to try.

PS: Below take animate animation as an example

<!
DOCTYPE html>  

The code above, stop () This method is I commented out, is I personally think the most perfect solution, not be commented out, is that I later after Baidu, others mentioned another solution, but my personal feeling is not particularly perfect, as for the difference I mention in the back.

In the beginning,

$thisTest. Filter (': Not (: Animated) '). Animate ({marginleft: "0em"});
$thisTest. Filter (': Not (: Animated) '). Animate ({marginleft: " -6em"});

These two lines of code, is not the filter () function, that is, when the first encounter with the bug when the appearance of the code.

The reason for this bug is that the event was created in a short period of time (the previous animation was not finished), and the animation was cumulative (it is estimated that the problem comes back to looking at the code for this reason). So, there are two ways to solve this problem.

"Filter"

One is filter with filter, before the animation occurs, filter out the elements that are being animated, only to let the last animation has ended the element to trigger the new event.

Then this brings up a new problem, when I move the mouse to the corresponding content, MouseOver event trigger, this time, when the animation is not finished, I will remove the mouse from the corresponding content area, the MouseLeave event trigger, but because the last animation is not finished, So even if the event is triggered, but the expected function is not executed, the expected "MouseLeave event trigger, content hidden" result is not possible.

Of course, if the operator stops at the corresponding content before the end of the animation triggered by the MouseOver event, the scheme will not have any effect.

"Stop"

For Stop (), although you know this is what everyone knows, move it again.

Syntax structure
$ ("#div"). Stop ()//Stop the current animation and continue with the next animation
$ ("#div"). Stop (true);/clear all animations for an element
$ ("#div"). Stop (False, true)//Let the current animation go directly to the end state, and continue with the next animation
$ ("#div"). Stop (true);//Clear all animations of the element so that the current animation reaches the end state directly

The idea of this scheme is simple: when I mouseover, triggering the corresponding animation, but not the end of the animation, I have to mouseleave, while triggering the mouseleave corresponding animation, this time I need to stop the corresponding elements in the animation. Then, the bug does not exist.

Finally, well, this essay seems to have nothing to sum up, in fact, is the animate, slide, fade animation functions familiar with it, but also familiar with the stop there are parameters without parameters of the difference (speak true, just started unexpectedly with stop, after a day or two, accidentally see the API, When you see the stop, you suddenly have the idea of using stop to fix the bug.

The above is the cloud Habitat Community Small series to share about jquery animate, slide, fade and other animation of the continuous trigger, lag repeated implementation of the bug, I hope that the future work of all of you to learn help.