Home > Developer > Web Develop
As usual, let's start by telling the background of this problem:
Because recently to make an operation option of the outgoing, and then think of the default hidden, the mouse across the way when the display.
When I first started to add a class= "active", directly triggered mouseover (or MouseEnter) when the add,mouseout (or MouseLeave) when the remove, this solution is very simple, also very practical, But the experience may not be so cool (OK, the word used, the moment feel good low ah), so I think of animate or slide these jquery animation, and then the first truth, this plugin to write their own, will encounter some problems, not very good implementation (after all, JS Master is not very in place), Then listen to colleagues talk to find jquery, import after the direct reference on it.
(Fortunately I did not develop a touch to do a special effect, the first reaction is to find plug-ins on the Internet, talking about this, and think of the first few days encountered about the table header to the interface rolling and fixed the solution, a few days to come up, tell the truth, that method on the Internet to find a lap did not find the right solution, Finally, I think of a method, or quite a sense of accomplishment, although it may not be the best solution)
Back to the point, online to find a circle, tell the truth, other people's plug-ins, do really great, and a variety of browser compatibility is also resolved, but I personally, only in two or three pages used, but also import files (this seems not particularly troublesome), but also with others, there is no sense of accomplishment.
Then, at the end of their own to write, although it took some time, but also encountered some problems, but still good, the problem finally solved, at least a few jquery built-in functions and familiar with a little.
PS: Finally add a sentence, after I find the solution, once again Baidu a bit, OK, out of the first page link, point in is I use method.
Bug reproduce: Originally want to do a moving diagram, as if too troublesome, or on the code bar, know that the problem should not see the diagram also know what is a problem; If you do not know the problem, you can copy the code down and try it out first.
PS: Take animate animation as an example
<!DOCTYPE HTML><HTMLLang= "ZH-CN"><Head> <title>Test</title> <MetaCharSet= "Utf-8"> <Linkrel= "stylesheet"href= "./bootstrap/css/bootstrap.min.css"> <Linkrel= "stylesheet"href= "./font-awesome/css/font-awesome.min.css"> <Scriptsrc= "./bootstrap/js/jquery-1.11/jquery.min.js"></Script> <Scriptsrc= "./bootstrap/js/bootstrap.min.js"></Script></Head><Body> <Divstyle= "width:70%;margin:50px auto;height:300px;"> <DivID= "Test"style= "width:900px;height:100px;border:1px solid red;overflow:hidden;"> <Divclass= "Test"style= "Margin-left:-6em"> <a>text used for testing<Iclass= "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"}); }) //continuous triggering of animated bugs //do not allow animation to accumulate, or stop the animation that is currently in progress before the new animation starts </Script></Body></HTML>
The above code, stop () This method is I commented out, is I personally think the most perfect solution, not commented out, is I later after Baidu, others mentioned another solution, but I personally feel is not particularly perfect, as for the difference I mentioned in the back.
At the very beginning,
$thisTest. Filter (': Not (: Animated) '). Animate ({marginleft: "0em"});$thisTest. Filter (': Not (: Animated) '). Animate ({marginleft: " -6em"});These two lines of code are not the filter () function, which is what the code looks like when you first hit the bug.
The cause of the bug is that the event is in a short period of time (the last animation is not finished), the animation accumulates (estimated to encounter this problem, go back to see the code know this reason). So, there are two ways to solve the problem.
"Filter"
One is filtering with filter, before the animation occurs, filter out the elements that are being animated, so that only the elements that have ended the previous animation can trigger new events.
And 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 then remove the corresponding content area outside the MouseLeave event trigger, but because the previous animation is not finished, So even if the event is triggered, but the expected function is not executed, the expected "MouseLeave event triggering, content hiding" result cannot be done.
Of course, if the operator stops at the corresponding content until the end of the animation triggered by the MouseOver event, the scheme will not be affected.
"Stop"
For Stop (), although you know this is what everyone knows, let's move it again.
The syntax structure is $ ("#div"). Stop ();//Stop the current animation and continue with the next animation $ ("#div"). Stop (true);//Clears all animations of the element $ ("#div"). Stop (false, true); Let the current animation go directly to the end state and continue to the next animation $ ("#div"). Stop (true, true);//Clears all animations of the element so that the current animation reaches the end state directlyThe idea of this scheme is simple: when I mouseover, triggering the corresponding animation, but in the animation is not finished, I want to mouseleave, while triggering the mouseleave corresponding animation, this time I need to stop the corresponding element is in the animation. Then, the bug doesn't exist.
Finally, well, this essay does not seem to summarize, in fact, animate, slide, fade animation function familiar with it, at the same time again familiar with the stop parameter no parameter difference (truth, just start didn't think with stop, after a day or two, accidentally see the API, See stop, just suddenly have to use stop to solve this bug idea).
PS: In fact, the most non-language is, why the beginning of the Baidu did not find it (only blame themselves in the beginning did not lose the key words).
Personal solutions to the continuous triggering of animations, slide, fade, and other recurring bugs in jquery
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
