我试图理解它们,但似乎无法理解。所以我想是否有人可以帮助我更好地理解它们是如何工作的。
当我添加悬停状态时,无论鼠标位于元素上还是当鼠标离开元素时,它都会产生不透明效果...它会重复...
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);
});
最佳答案
您可以组合事件处理程序:
$("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);
});
或者,由于您没有委托(delegate)事件,因此您可以使用 hover
方法:
$("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 状态(不透明度动画),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12727561/