Solved

Solving multiple-animation instance issue on jQuery slideToggle

Posted on 2015-01-06
4
253 Views
Last Modified: 2015-01-07
Here is my test website:
http://beta.stoneridgeretirement.com

The drop-down navigation menu at the top is handled with this function:

$('ul#nav1 li').on('mouseenter mouseleave', function(){
	$(this).children('ul').slideToggle(100);
});

Open in new window


In general, it works great, and is obviously very simple. However, it is possible to make it malfunction by moving your mouse very quickly from the main (blue) button/link, downward to where the drop-down menu appears. If you do it "just right", the drop-down menu will repeatedly slide up and down, a whole bunch of times, before finally stopping.

I have handled this kind of thing in the past using a variety of methods, most often by setting a variable that says "animation is on" and setting it back to "animation is off" after the animation completes. But I'm not sure that will work in this case, at least not using slideToggle.

My current function is so simple, I hate to make a mess of it by over complicating the code. Yet, not sure I can avoid that. I'm not even exactly sure "why" the problem exists, or what is being triggered exactly when you move the mouse in that way, etc.

Would appreciate any insight into a possible solution. This kind of thing comes up a lot with jQuery animations.

Thank you.
0
Comment
Question by:bbdesign
  • 2
  • 2
4 Comments
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 40534359
You can stop any in-progress animations before starting new ones by adding stop().

        $('ul#nav1 li').on('mouseenter mouseleave', function(){
      $(this).children('ul').stop().slideToggle(100);

When an animation that's triggered by both mouseenter and mouseleave is in the same handler you can get stuck in a loop where the mouse leave triggers the animation which in turn causes a mouse enter when the animated item moves passed the cursor, rinse and repeat to infinity.
0
 

Author Comment

by:bbdesign
ID: 40536646
Thank you, that seems to help quite a bit! I separated my slideToggle out into two separate functions, and added stop(), the problem seems to have gone away.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40536669
You're welcome.

I was not able to reproduce the problem in my test after adding the stop() to the single event handler. Maybe your experience was different?
0
 

Author Comment

by:bbdesign
ID: 40536714
Maybe that would work too, I just felt more "in control" by having the two functions, I guess.
0

Featured Post

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Html form and modal / img src -problem 3 29
Button function on table is in trouble 3 20
Copying table data to one another 15 29
message Alert on an empty search 10 18
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question