jQuery悬停，mouseenter，mouseleave状态（不透明动画） [英] jQuery hover, mouseenter, mouseleave state (opacity animate)

问题描述

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

I am trying to understand them but seems like I cannot. So I thought if someone can help me to better understand how these works.

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

When I add hover state it simply do opacity effect whether mouse is on the element or when mouse leaves element... It repeats it...

并且mouseenter& leave工作正常，但我不知道如何告诉他一次$（this）所以我做了些什么并且它可以工作，但也许有人可能会告诉我什么是正确和更好的方式。

And mouseenter&leave works fine but I don't know how to tell him once $(this) so I made something and it works but perhaps someone may tell me what is correct and better way.

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

推荐答案

您可以组合您的事件处理程序：

You can combine your event handlers:

$("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 方法：

Or as you are not delegating the events you can use hover method:

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

这篇关于jQuery悬停，mouseenter，mouseleave状态（不透明动画）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！