583 При создании меню навигации, или любого другого jQuery скрипта, довольно часто появляется необходимость в надежном методе определения положения мышки над объектом или вне его зоны.
И тут на помощь приходит hover() метод.
А вот как он используется...
JS
|
1 2 3 4 5 6 7 |
$('.selectorClass').hover( function(){ $(this).stop().fadeTo('slow',0.4); }, function(){ $(this).stop().fadeTo('slow',1); }); |
Первая функция работает, когда мышь перемещается над элементами на странице, в которых есть имя класса selectorClass, а вторая, когда мышь покидает зону элементов.
Вы можете использовать «это» внутри функций, для доступа к элементам, которые вызвали это событие.
Hover на самом деле связывает первую функцию с событием mouseenter, а вторую с mouseleave, чтобы можно было для альтернативы написать следующее:
|
1 2 3 4 5 |
$('.selectorClass').mouseenter(function(){ $(this).stop().fadeTo('slow',0.4); }).mouseleave(function(){ $(this).stop().fadeTo('slow',1); }); |
Начиная с версии jQuery 1.4, можно пользоваться одной функцией для hover, которая вызывает оба события mouseenter и mouseleave. Таким образом, можно сократить код еще и в письменном виде только для одной функции:
|
1 2 3 4 |
$('.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()
