jquery animation in menu bar

i am trying to create a menu bar using jquery. I am using the following code,

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

The mouseover and mouse out functions are working, i c开发者_Go百科hecked those using alert boxes but no change is happening to the items...? where am i going wrong ?

Well, you have a few syntax errors:

$(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);
     });
});

I'm not sure, however, what you're trying to achieve here. I.e., the above works but I'm not sure it really does what you intend.

You are going wrong with using tables for a list. Use a list containing list-items.

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

and float the list items left

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

Your animation should work now, also you could use the jquery hover function

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

to make it a little easier

You can find the complete code in this page:

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

The problem was the method and callback arguments.

Regards.