jquery animation dans la barre de menu

Question

J'essaie de créer une barre de menu en utilisant jquery. Je suis en utilisant le code suivant,

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

Les fonctions et de la souris sur mouseover travaillent, j'ai vérifié ceux qui utilisent des boîtes d'alerte, mais aucun changement qui arrive aux articles ...? Où vais-je mal?

Answer 1

Eh bien, vous avez quelques erreurs de syntaxe:

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

Je ne suis pas sûr, cependant, ce que vous essayez d'atteindre ici. C'est-à-dire, le works ci-dessus mais je ne suis pas sûr qu'il fait vraiment ce que vous avez l'intention.

Answer 2

Vous pouvez trouver le code complet dans cette page:

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

Le problème était les arguments method et callback.

Cordialement.

Answer 3

Vous ne vous trompez pas en utilisant des tables pour une liste. Utilisez une liste contenant des éléments de liste.

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

et flotter les éléments de liste à gauche

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

Votre animation devrait fonctionner maintenant, vous pouvez également utiliser la fonction de vol stationnaire jquery

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

pour le rendre un peu plus facile