jquery menu animé: comment obtenir état actif

Question

s'il vous plaît pouvez-vous aider un débutant jquery? Je ne sais pas vraiment comment aller de l'avant ...

J'ai fait un menu animé jquery: look at this. le contenu se charge avec ajax, donc il n'y a pas vraiment de chargement de page.

maintenant je dois faire la partie de l'élément actif. pour donner un élément cliqué sur une classe « sur », je l'ai fait:

$navig.click(function() { 
    $(this).addClass("on"); 
    $navig.not(this).removeClass("on"); 
}) 

l'élément avec la classe « sur » doit:

• Animer actif (similaire à l'état mouseover), et de garder cette
• autres éléments doit animer revenir à l'état normal (lorsque la classe « sur » est supprimé)
• si vous cliquez sur un élément sous, l'élément parent doit animer à l'état actif

des idées pour le résoudre?

Answer 1

Vous pouvez utiliser le `: animation 'sélecteur

$navig.click(function() { 
    // turn on current item and animate to blablabla 
    $(this).addClass("on").animate({blablabla}); 
    // turn off others and animate back 
    $navig.not(this).removeClass("on").filter(':animated').stop().animate({blablabla}); 
}); 

Answer 2

Vous obtiendrez peut-être quelque part avec une animation CSS, comme ceci:

.menuitem { transition: all 1s ease-in-out; } 

Le soutien est pas très bon en ce moment, je m assez sûr. Pour les navigateurs basés sur Webkit cela fonctionne, mais avec le

-webkit-transition 

propriété au lieu de transition. Peut-être qu'il existe un support similaire pour les autres navigateurs.