CODEWITHSUNDEEP
jquerycss
SVS
SVS

Reputation: 4275

Animation of div doesn't stop after hover event ends

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!

Upvotes: 2

Views: 735

Answers (4)

SVS
SVS

Reputation: 4275

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');
});​

Upvotes: 0

Ram
Ram

Reputation: 144659

You should use stop() before animate() method, try the following:

$('#slider_thumbnail li .slide_thumb').hover(function(e){
     $(this).find('.slide_btn').stop().animate({width:240});
     $(this).find('.image-wrapper').show('slow');
 },function(e){
     $(this).find('.slide_btn').stop().animate({width:125});
     $(this).find('.image-wrapper').hide('slow');
});

DEMO

Upvotes: 4

Andy
Andy

Reputation: 14575

I appreciate it isn't what you wanted, but I'm bored and wanted to do it.

Pure CSS version of what (I think) you want: http://jsfiddle.net/fsF3W/5/

Upvotes: 0

bingjie2680
bingjie2680

Reputation: 7773

I have used hoverIntent plugin for this issue before, it worked very well. maybe you want to try this:

Upvotes: 1

Related Questions