Меню работает с использованием анимации JQuery, и при многократном наведении курсора мыши на пункты меню, происходило частое повторение анимации, т.е. создавалась очередь из анимационных эффектов. И вот наконец-то решил эту проблему и хочу поделиться с Вами данным решением! Так вот, для того чтобы избавиться от этой очереди анимационных эффектов можно использовать метод stop() непосредственно перед началом анимации, а можно использовать плагин hoverFlow. Давайте рассмотрим оба варианта.
Вот пример кода без использования метода stop() и плагина hoverFlow. При многократном наведении курсора мыши происходит создание очереди анимационных эффектов и смотрится это забавно.
$("#example1 li").hover(function() {
$(this).animate({paddingLeft: '+=10'}, 200);
}, function() {
$(this).animate({paddingLeft: '-=10'}, 200);
});
Вот пример предыдущего кода с использованием метода stop(). Конечно очереди нам удалось избежать, но эффект происходит только при строгом наведении курсора мыши на элемент.
$("#example2 li").hover(function() {
$(this).stop().animate({paddingLeft: '+=10'}, 200);
}, function() {
$(this).stop().animate({paddingLeft: '-=10'}, 200);
});
Ну и на конец применяем плагин hoverFlow. Смотрится гораздо лучше.
$("#example3 li").hover(function(e) {
$(this).hoverFlow(e.type, {paddingLeft: '+=10'}, 'fast');
}, function(e) {
$(this).hoverFlow(e.type, {paddingLeft: '-=10'}, 'fast');
});
Более подробно ознакомиться с плагином и скачать его Вы сможете на
сайте автора!