Question

我有以下代码来显示子菜单。我希望子菜单在鼠标悬停时淡入，但它不会淡入 - 它只是立即显示子菜单：

jQuery("ul li").mouseover(function() {
    jQuery(this).fadeIn(1000, function () {
        jQuery(this).find('ul').css('right','0px').css('top','24px');
    });
}).mouseout(function(){
    jQuery(this).find('ul').css('right','-1000px');
});

感谢

Answer 1

首先是问题，没有任何消失，因为你试图淡化你所在的<li>，而不是它下面的<ul>，它已经可见了。然后，你将在淡入淡出回调中移动它，这意味着它在淡入淡出完成后在屏幕上移动（并且无论如何都不会发生淡入淡出）。

对于修复：这里有一些事情，首先你可能想要mouseeneter和mouseleave（在进入/离开子元素时不会触发）。您可以使用.hover()进一步缩短它，但由于您只是定位和隐藏/显示，只需进行隐藏/显示，无理由重新定位。同时确保你在<ul>下面的地方褪色，而不是你所在的<li>。这是整体外观：

jQuery("ul li ul").hide().css({ right: 0, top: 24 }); jQuery("ul li").hover(function() { jQuery(this).find('ul').fadeIn(1000); //possibly .children('ul') instead }, function(){ jQuery(this).find('ul').hide(); });

这使用.css()的对象超载来缩短它。但是，您可以在CSS中开始使用：

ul li ul { right: 0; top: 24; display: none; }

然后你可以删除第一行：jQuery("ul li ul").hide().css({right:0,top:24});

jQuery .fadeIn（）没有按预期工作

1 个答案: