Question

So, here is my first question from community.

Question: I am trying to show a div & increase width of hovered div with animation.

Problem: I achieved this by jquery & css but, the problem is on continuous hovering the animation don’t stop. So, i want to flush the previous animation from memory once the mouse is out of the div.

I searched and found something like stop() to be used but i am not getting the desired result.

Check what i have achieved yet

Thanks in advance!

Answer 1

So, Thanks to everyone for answering & special thanks to @Raminson.

I tried to read & understand stop() & finally i figured out what i want

I used stop(true, false)

true will remove the queued animation.
false will not make animation jump to end

And it worked: Demo

Jquery code:

$('#slider_thumbnail li .slide_thumb').hover(function(e){ 

                 $(this).find('.slide_btn').stop(true, false).animate({width:240});
                 $(this).find('.image-wrapper').stop(true, false).show('slow');
             },function(e){

                 $(this).find('.slide_btn').stop(true, false).animate({width:125});
                 $(this).find('.image-wrapper').stop(true, false).hide('slow');
});​