JQuery SlideToggle and Stop Methods

By Akbar

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:

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

JQuery Rocks!

Tags: , , ,