JQuery SlideToggle and Stop Methods

I was working on a new slider animation for my home page, for Jack Sparrow’s Compass product, and I was stuck on one basic problem; that’s I wanted to give the info popup DIV slide-in effect similar to that of Google App Store i.e. slide in from bottom to top.

Instead of trying different options of JQuery, I preferred searching on the web, and the first link I found answered my question well (Google, you rock):
Configure jQuery’s slideToggle() to slide up from the bottom

However, I was having another issue and that’s as I quickly applied mouse over and out on the parent DIV, I was able to make these animation queued, and it was showing animation several time even when the mouse goes outside the parent DIV area. The fix however was simple and that is to call JQuery stop() method for the object on which animation is running.

Here is the code snippets which worked well for me:

1
2
3
4
5
6

$(document).ready(function() {
	$("#jackCompassWrapper").hover(
		  function() { $(this).children('#jackCompassInfo').stop().slideToggle(500); },
		  function() { $(this).children('#jackCompassInfo').stop().slideToggle(500);  }
	 );
 });

JQuery Rocks!

Tags: Animation, JQuery, Slide, Stop

This entry was posted on Monday, July 30th, 2012 at 3:50 pm and is filed under JavaScript. You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.