Метод Hover на jQuery

При создании меню навигации, или любого другого jQuery скрипта, довольно часто появляется необходимость в надежном методе определения положения мышки над объектом или вне его зоны. И тут на помощь приходит hover() метод.
И вот как он используется:

Пример     Скачать

---

$('.selectorClass').hover(
function(){
	$(this).stop().fadeTo('slow',0.4);
},
function(){
	$(this).stop().fadeTo('slow',1);
});

Первая функция работает, когда мышь перемещается над элементами на странице, в которых есть имя класса selectorClass, а вторая, когда мышь покидает зону элементов.

Вы можете использовать «это» внутри функций, для доступа к элементам, которые вызвали это событие.

Hover на самом деле связывает первую функцию с событием  mouseenter, а вторую с
mouseleave, чтобы можно было для альтернативы написать следующее:

$('.selectorClass').mouseenter(function(){
	$(this).stop().fadeTo('slow',0.4);
}).mouseleave(function(){
	$(this).stop().fadeTo('slow',1);
});

Начиная с версии jQuery 1.4, можно пользоваться одной функцией для hover, которая вызывает оба события mouseenter и mouseleave. Таким образом, можно сократить код еще и в письменном виде только для одной функции:

$('.selectorClass').hover(function(){
	this.check = this.check || 1;
	$(this).stop().fadeTo('slow',this.check++%2==0 ? 1 : 0.4);
});

В приведенном выше примере каждый раз когда выполняется функция, увеличивается this.check.  Кроме того, можно выбрать уровень прозрачности, для fadeTo() (1 — полностью видна).

Это также прекрасное место для использования jQuery функций-переключателей, таких как .SlideToggle() и .ToggleClass() .

---