jQuery懸停，mouseenter，mouseleave狀態（不透明度動畫）

Question

我想了解他們，但似乎我不能。所以我想如果有人能幫助我更好地理解這些作品。

當我添加懸停狀態時，它根本就不透明效果鼠標是否在元件上，或者當鼠標離開元素......它重複它...

而且的mouseenter &離開工作正常，但我不知道如何告訴他一次$（這個），所以我做了一些事情，它可以工作，但也許有人可能會告訴我什麼是正確的和更好的方法。

$("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); 
}); 

Answer 1

你可以結合你的事件處理程序：

$("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); 
}) 

Answer 2

如果可以選擇，我願意用CSS做這件事。

示例代碼中使用CSS的:hover財產

CSS

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

EXAMPLE

否則，@未定義的解決方案是，你在找什麼=）