Плавный hover на jQuery

2010-06-21


Иногда нужно реализовать изменение свойств элемента при наведении мишки. В CSS для этого есть hover. Но что делать, если это изменение должно быть плавным или же должна возникать анимация? К примеру при наведении мишки на элемент — он должен медленно подсветится, а когда пользователь убирает мышку — медленно затухнуть.

Можно воспользоваться готовым методом jQueryhover.

Пример:

$("#my_element")
.hover(
function(){$(this).stop().fadeTo("fast",1)},
function(){$(this).stop().fadeTo("slow", 0)}
);

Этот пример можно оформить в удобный jQuery-плагин:

// Реализация плагина:
$.fn.iconHover = function () {
return $(this).hover(
function(){$(this).stop().fadeTo("fast",1)},
function(){$(this).stop().fadeTo("slow", 0)}
);
}
// Пример использования плагина:
$("#my_element").iconHover();

Пользуйтесь на здоровье. :)

Примечания:
1) Метод stop() используется для того, чтобы при быстром многоразовом наведении мишкой на элемент, анимация не начинала вести себя непредсказуемо и неконтролируемо, мигая много раз.
2) Плагин возвращает обернутый набор, по-этому он может участвовать в выражениях-цепочках, свойственный для jQuery.



3 комментария на «Плавный hover на jQuery»

  1. Виторк:

    Можно более подробнее пожалуйста? поставить пример какой та, а то не понятно что и как? можно это реализовать картинкой?

  2. admin:

    Вот набросал примерчик:
    http://jsfiddle.net/7xQMR/
    Обратите внимание, что я изменил второй fadeTo(«slow», 0), установив ему значение 0.3.
    Можно экспериментировать как угодно, это всего лишь удобная заготовка…

    Таким образом реализованы иконки в нижнем левом углу на сайте http://sing-my-song.com/

  3. Алексей:

    Спасибо огромное, очень помогло! долго искал решение этой задачи. Правда я сам поставил stop(true,true)

Добавить комментарий