动画CSS与jQuery

所以我有CSS，看起来像这样：动画CSS与jQuery

.dropdown{ 
position:absolute; 
display: none; 
width: 69%; 
background-color: #6f6f6f; 
margin-right: 35px; 
z-index: 999999999; 
padding: 3%; 
margin-top: 20px; 
} 
#nav-menu > li:hover > .dropdown{ 
display: block; 
top:auto; 
}

这个伟大的工程，但是我想要使用jQuery的悬停宽松插件效果

我知道有一个节目/隐藏jquery函数，但它与下拉式（下拉并不总是保持显示，而用户正在与它交互）反应，因为使用似乎每一次工作的CSS。

所以我真的只是想添加一个效果的显示：无;然后在悬停上显示：块。原谅我，如果这是容易的，我的jQuery的技能都不是很大，我无法找到答案的任何地方

小提琴

fiddle

来源

2013-08-21 tfer77

你可以创建一个小提琴，并显示我们的HTML？ – maverickosama92

也许这个主题可以帮助你：http://stackoverflow.com/questions/3713513/jquery-dropdown-menu-using-slideup-and-slidedown-on-hover-is-jumpy –

@MaciejCzekaj新增 – tfer77

DEMO

DEMO2

试试这个

$(document).ready(function() { 
$(".menu_right").hover(
    function() { 
     $(".dropdown").slideDown(); 
    }, 
    function() { 
    $(".dropdown").slideUp(); 
    } 
); 
});

希望这可以帮助，谢谢

来源

2013-08-21 17:43:09 SarathSprakash

你的问题是，当你在悬停的部分，你输入的子元素导致主元素认为你已经徘徊。在jQuery的解决办法是使用“悬停的方法是这样的：

$(".dropdown").hover(function(){$(this).fadeIn(100);$(this).fadeOut(500);});

第一功能告诉了jQuery做什么，当你将鼠标悬停在，当你离开它，不管有多少孩子的是秒做什么嵌套在此元素内。很明显，这段代码没有什么意义，因为你不能悬停不在屏幕上的东西，你必须将悬停方法应用到需要对悬停作出反应的元素上，并在内部嵌套一些元素他出现。

<div class="dropDownBtn"> 
    <div class="subelement"></div> 
</div>

在这种情况下，你可以这样做：

$(".dropdown").hover(function(){$(this).find('.subelement').fadeIn(100);$(this).find('.subelement').fadeOut(500);});

来源

2013-08-21 15:55:20

好的...看起来像解释不再需要 –

动画CSS与jQuery

回答

相关问题