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.