0

Referring to my previous question

I have got the sliding effect on search box. I have implemented the same effect for two panels in the same page.

The problem now is, If you can see my working demo, when you mouse over on 1st and second icon you can see the sliding effect.

This effect should slide one time and close smoothly after a second which is working perfect.

But when you quickly mouse over on both the icons (one after the another for 2-3 times) and suddenly take cursor to the empty space of the section bar and then to the down, you can see the weird animation of the sliding.

Why is this effect happening?

This is the sample code for SOF

$('.search').mouseenter(function(){
    $('.search > img').hide();
    $('.search > input').show();
    $(this).animate({'width' : "300px"});
});
Community
  • 1
  • 1
Sowmya
  • 26,684
  • 21
  • 96
  • 136

1 Answers1

0

You need to use .stop() it will tell jquery to stop all other animations until this one has finished. jquery stop

Andrew
  • 1,850
  • 14
  • 18
  • I don't need to stop the one animation until another is done but I just don't want that multiple time sliding. Both should animate in parallel – Sowmya May 07 '13 at 13:06
  • The system is not able to do 2 animations at the same time, instead it builds up a que of animations and has to do them all one at a time. – Andrew May 07 '13 at 13:08