動畫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

回答

相關問題