菜单栏中的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动画

回答

相关问题