菜單欄中的jquery動畫

我想用jquery創建一個菜單欄。我使用下面的代碼，菜單欄中的jquery動畫

<div class="menu"> 
<table align="center"> 

<tr> 
<td class="menu_item" style="background:green;" > 
<a style="color: white;" href="index.php?view=Index">Home</a> 
</td> 
<td class="menu_item" style="background:blue;" > 
<a style="color: white;" href="index.php?view=Services"> Service </a> 
</td> 
<td class="menu_item" style="background:red;" > 
<a style="color: white;" href="index.php?view=About"> About </a> 
</td> 
<td class="menu_item" style="background:yellow;" > 
<a style="color: white;" href="index.php?view=Download"> Download</a> 
</td> 
<td class="menu_item" style="background:pink;" > 
<a style="color: white;" href="index.php?view=Contact"> Contact</a> 
</td> 
</tr> 
</table> 
</div> 
<hr> 

<script> 
$(document).ready(function(){ 
    //When mouse rolls over 
    $(".menu_item").mouseover(function(){ 

     $(this).slideUp(1000, method, callback}); 

    //When mouse is removed 
    $(".menu_item").mouseout(function(){ 
     $(this).slideUp(1000, method, callback}); 

}); 
</script>

鼠標懸停和鼠標進行功能工作，我檢查那些使用警告框，但沒有正在發生變化的物品......？我哪裏錯了？

來源

2011-03-23 user434885

好了，你有幾個語法錯誤：

$(document).ready(function(){ 
    //When mouse rolls over 
    $(".menu_item").mouseover(function(){ 
     $(this).slideUp(1000); 
    }); 

    //When mouse is removed 
    $(".menu_item").mouseout(function(){ 
     $(this).slideUp(1000); 
    }); 
});

我不知道，但是，你想在這裏實現什麼。即，上面的works，但我不確定它是否真的按照你的意圖做。

來源

2011-03-23 08:37:26 jensgram

我甚至沒有看到語法錯誤，只是被表格分散以創建菜單，我認爲一排TD總是有s ame高度，所以slideUp效果不會有結果。 – 2011-03-23 08:45:23

@Han Dijk但你說得對。這種方法根本上是錯誤的:) – jensgram 2011-03-23 08:49:33

您可以在此頁面的完整代碼：

http://jsfiddle.net/mdfj8/1/

問題是method和callback參數。

問候。

來源

2011-03-23 08:41:21 Zakaria

對於列表使用表格會出錯。使用包含列表項目的列表。

<ul> 
    <li class="menu_item"><a href="http://..."></a></li> 
    <li class="menu_item"><a href="http://..."></a></li> 
    <li class="menu_item"><a href="http://..."></a></li> 
    ... 
</ul>

和浮動列表項左

ul li.menu_item { 
    display: block; 
    float: left; 
}

你的動畫應該現在的工作，你也可以使用jQuery的懸停功能

$(".menu_item").hover(over, out);

，使其更容易一些

來源

2011-03-23 08:42:30

使用float：left屬性從來就不是一個好主意... – user434885 2011-03-23 08:54:25

恕我直言，float-left是一種被廣泛接受的方法，用於浮動剩下的東西，我至少在每個站點上使用它一次，問題。你也可以使用display：inline-block ;,但是這會引起一些空白問題。 – 2011-03-23 08:58:21

菜單欄中的jquery動畫

回答

相關問題