Question

我试图了解它们，但似乎我不能。所以我想如果有人能帮助我更好地理解这些是如何运作的。

当我添加悬停状态时，它只是做不透明效果，无论鼠标是在元素上还是当鼠标离开元素时...它重复它......

并且mouseenter＆amp; leave工作正常，但我不知道怎么告诉他一次$（这个）所以我做了一些东西并且它有效但也许有人可能告诉我什么是正确和更好的方式。

$("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

否则，@ undefined的解决方案就是你要找的东西=）

jQuery悬停，mouseenter，mouseleave状态（不透明动画）

2 个答案: