Веб-заметки и Веб-подсказки

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

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

Пример:

$("#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.