Animation ne marche qu'une seule fois ?

Bonjour a vous, je suis confronté au problème suivant :

J'ai un menu que je souhaite fixer au top lorsque je scroll à son niveau. ex:Smint avec Jquery.

Et je souhaite dans le même temps ajouter une balise <li> a mon menu. Pour ce faire j'ai joué avec les padding pour faire entrer la balise <li> dans mon menu et je la fait sortir en agrandissant les paddings

Ce que j'ai réalisé :

<nav class="grid_12">
	<ul>
		<li><a id="aa" href="#"><img src="./home.png" style="height:22px;"></a></li>
		<li><a id="bb" href="#" class="promo">Promotions</a></li>
		<li><a id="cc" href="#">Inspirations</a></li>
		<li><a id="dd" href="#">Pièces détachées</a></li>
		<li><a id="ee" href="#">Réalisation sur mesure</a></li>
		<li><a id="ff" href="#"><img src="./panier.png" style="height:22px;">Mon Panier(0)</a></li>		
	</ul>
</nav>

    var scrollfunction = $(window).scroll(function(){

	var scrollTop = $(window).scrollTop()

      if (scrollTop > 156)
      {
		  $('nav ul li a').animate({paddingLeft: 16,paddingRight:16}, 400);
		  $('nav').stop().addClass("fixe");
      }
	  else {
		  $('nav ul li a').animate({paddingLeft: 35,paddingRight:35}, 400);
		  $('nav').stop().removeClass("fixe");
      }
	  
}); 

Mon animation marche parfaitement lorsque je descend la page mais quand je remonte au dessus de 156px, la case que j'ai ajouter ne disparait pas !

Avez-vous une idée ?
Modifié par remif (25 Mar 2014 - 11:07)

Salut.

Le problème dans ton script je pense, c'est le stop() qui devrait être avant ton animate ( plus que devant addClass() )
Parce que un animate se rajoute dès que tu bouges ton scroll, et s'ajoute à une queue, donc pour conclure ton code fonctionne mais il faut attendre que tous les animates dans un sens se finissent. (je sais pas si j'étais clair)
En imaginant ton CSS ... J'ai testé un truc sur Fiddle : Cf. Lien
Modifié par SolidSnake (25 Mar 2014 - 18:51)

Sa marche parfaitement, je vous donne rendez-vous dans la rubrique Critiques lorsque j'aurais fini mon Site. Merci