jQuery – переход анимации прерывается зависанием

Я создал div, чтобы соскальзывать извне windows просмотра и помещать себя поверх исходного div.

Анимация запускается путем зависания над box1 . Это приведет к box2 вместо box1 .

Когда мышь покинет box2 div, он снова будет помещен за пределы области просмотра.

Однако медленное перемещение курсора в этом div приведет к быстрому запуску анимации.

  $(document).ready(function() { $('.box1').mouseover(function() { $('.box2').stop().animate({ top: 0 }, 100); }).mouseout(function() { $('.box2').stop().animate({ top: '-200px' }, 100); }); }); 

Следующая скрипка должна представить проблему.

http://jsfiddle.net/B9wx8/

Сделайте так, Bind event для обоих элементов, это решит проблему

 $(document).ready(function () { $('.box1,.box2').mouseenter(function () { $('.box2').stop().animate({ top: 0 }, 'slow'); }).mouseleave(function () { $('.box2').stop().animate({ top: '-200px' }, 'slow'); }); }); 

DEMO

Вы могли бы сделать что-то вроде этого:

 var done = true; $(document).ready(function() { $('.box1').mouseenter(function() { if (done){ done = false; $('.box2').stop().animate({ top: 0 }, {duration: 400, complete: function(){ done = true } }); } }); $('.box2').mouseleave(function() { if (done){ done = false; $('.box2').stop().animate({ top: -400 }, {duration: 400, complete: function(){ done = true } }); } }); }); 

Поэтому проверьте, все ли анимация продолжается, и только если не начать следующую