jQuery hover, mouseenter, состояние mouseleave (анимация непрозрачности)

Я пытаюсь их понять, но, кажется, не могу. Поэтому я подумал, может ли кто-нибудь помочь мне лучше понять, как это работает.

Когда я добавляю состояние наведения, он просто создает эффект непрозрачности, независимо от того, находится ли мышь на элементе или когда мышь покидает элемент... Он повторяется...

И mouseenter&leave работает нормально, но я не знаю, как сказать ему один раз $(this), поэтому я сделал что-то, и это работает, но, возможно, кто-то может сказать мне, как правильно и лучше.

$("nav.topMenu-left li, nav.topMenu-right li").on('mouseenter', function() {
    $(this).animate({'opacity': '0.5'}, 100);
});

$("nav.topMenu-left li, nav.topMenu-right li").on('mouseleave', function() {
    $(this).animate({'opacity': '1'}, 100);
});

jquery mouseenter jquery-hover mouseleave
person dvlden    schedule 04.10.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете комбинировать обработчики событий:

$("nav.topMenu-left li, nav.topMenu-right li").on('mouseenter mouseleave', function(e) {
   if (e.type === 'mouseenter')
      $(this).animate({'opacity': '0.5'}, 100);
   else 
      $(this).animate({'opacity': '1'}, 100);   
});

Или, поскольку вы не делегируете события, вы можете использовать метод hover:

$("nav.topMenu-left li, nav.topMenu-right li").hover(function(){
    $(this).animate({'opacity': '0.5'}, 100);
}, function(){
    $(this).animate({'opacity': '1'}, 100);   
})
person undefined    schedule 04.10.2012
comment
Они оба работают нормально... Спасибо за них обоих! Я буду играть с разными вещами. Ваше здоровье. - person dvlden; 04.10.2012

arrow_upward
1
arrow_downward

Если у вас есть возможность, я бы сделал это с помощью CSS.

Пример кода с использованием свойства CSS :hover

CSS

div{
    width: 100px;
    height: 100px;
    background-color: blue;                
    opacity: .5;
}
div:hover{
    opacity: 1;
}

ПРИМЕР

В противном случае решение @undefined - это то, что вы ищете =)

person Chase    schedule 04.10.2012
comment
Да, я просто не хотел использовать переход для облегчения. Спасибо, +1 :) - person dvlden; 04.10.2012
comment
А, ну в таком случае @undefined прав. Метод hover в jquery может принимать 2 функции (первая — mouseenter, вторая — mouseleave) .hover( handlerIn(eventObject), handlerOut(eventObject) ). api.jquery.com/hover - person Chase; 04.10.2012