如何讓我的導航欄項目在懸停時滑下？ （jQuery）

Question

我試過尋找這個，但似乎每個人都問類似的東西是尋找更復雜的東西，所以沒有一個答案給了我很多見解。

我不打算下拉菜單，只是一個簡單的動畫來指示用戶的鼠標結束導航選項。這是我目前使用的jQuery代碼，它根本不產生任何效果：

$(document).ready(function(){ 
    $(nav li).mouseenter(function(){ 
     $(nav li).slideDown('slow'); 
    }); 
}); 

爲什麼不能這樣工作，以及會發生什麼？

Answer 1

$(nav li)不正確，將其更改爲$('nav li')即引號內。

爲使所有nav lislideDown

$(document).ready(function() { 
    $("nav li").mouseenter(function() { 
     $("nav li").slideDown('slow'); 
    }); 
}); 

製作當前nav lislideDown

$(document).ready(function() { 
    $("nav li").mouseenter(function() { 
     $(this).slideDown('slow'); 
    }); 
}); 

Answer 2

您可以使用：hover css僞類來實現此效果，並且CSS轉換以添加動畫效果。

ul li{ 
    display:inline-block; 
    padding:20px; 
    background:red; 
    margin-right:10px; 
    transition: .5s; 
    -webkit-transition: .5s; 
} 

ul li:hover{ 
    background:orange; 
} 

http://jsfiddle.net/cx6Yr/1/

Answer 3

你缺少引號

$(document).ready(function(){ 
    $("nav li").mouseenter(function(){ 
     $("nav li").slideDown('slow'); 
    }); 
});