
И вот как он используется:
$('.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() .
Комментариев нет:
Отправить комментарий