jQuery的悬停，的mouseenter，鼠标离开状态（不透明度动画）(jQuery hover,

我想了解他们，但好像我不能。 所以我想，如果有人可以帮助我更好地了解这些是如何工作的。

当我添加悬停状态时，它根本就不透明效果鼠标是否在元件上，或者当鼠标离开元素......它重复它...

而与的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;
}

例

否则，@未定义的解决方案是，你在找什么=）

文章来源: jQuery hover, mouseenter, mouseleave state (opacity animate)