Здравствуйте уважаемые читатели 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'); }); |
Более подробно ознакомиться с плагином и скачать его Вы сможете на сайте автора!
Источник статьи/урока: https://xozblog.ru