jQuery .fadeIn（）不按预期方式工作

问题描述：

我有下面的代码显示子菜单。我希望子菜单淡入鼠标悬停，但它不褪色的 - 它只是立即显示子菜单：jQuery .fadeIn（）不按预期方式工作

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'); 
});

感谢

你为什么给鼠标悬停一个css权和顶部？ – Tim 2010-07-30 07:03:32

btw你在一个li元素中褪色而不是你的子菜单// ul – Tim 2010-07-30 07:04:02

答

首先这个问题，什么也没有褪色，因为你想淡入淡出<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()对象overrload，缩短了一点。但是，你可能只是有这个在CSS中开始：

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

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

jQuery .fadeIn（）不按预期方式工作

相关推荐