Очистка очереди анимации JQuery (плагин hoverFlow)

Здравствуйте уважаемые читатели XoZblogа! Была у меня небольшая проблема с меню, расположенным справа. Меню работает с использованием анимации JQuery, и при многократном наведении курсора мыши на пункты меню, происходило частое повторение анимации, т.е. создавалась очередь из анимационных эффектов. И вот наконец-то решил эту проблему и хочу поделиться с Вами данным решением! Так вот, для того чтобы избавиться от этой очереди анимационных эффектов можно использовать метод stop() непосредственно перед началом анимации, а можно использовать плагин hoverFlow. Давайте рассмотрим оба варианта.

Без метода stop() и без плагина

Вот пример кода без использования метода stop() и плагина hoverFlow. При многократном наведении курсора мыши происходит создание очереди анимационных эффектов и смотрится это забавно.

1
2
3
4
5
$("#example1 li").hover(function() {
   $(this).animate({paddingLeft: '+=10'}, 200);
}, function() {
   $(this).animate({paddingLeft: '-=10'}, 200);
});

С методом stop()

Вот пример предыдущего кода с использованием метода stop(). Конечно очереди нам удалось избежать, но эффект происходит только при строгом наведении курсора мыши на элемент.

1
2
3
4
5
$("#example2 li").hover(function() {
   $(this).stop().animate({paddingLeft: '+=10'}, 200);
}, function() {
   $(this).stop().animate({paddingLeft: '-=10'}, 200);
});

C плагином hoverFlow

Ну и на конец применяем плагин hoverFlow. Смотрится гораздо лучше.

1
2
3
4
5
$("#example3 li").hover(function(e) {
    $(this).hoverFlow(e.type, {paddingLeft: '+=10'}, 'fast');
  }, function(e) {
    $(this).hoverFlow(e.type, {paddingLeft: '-=10'}, 'fast');
  });

Более подробно ознакомиться с плагином и скачать его Вы сможете на сайте автора!

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!