Bonjour,

Sur le site que je suis entrain de développer, j'ai décidé de m'autoriser une petite fantaisie futile.

Sous le menu (horizontal) de mon portfolio se trouvent une petite boule, qui glisse en partant du bouton de la page active jusqu'au bouton survolé. Qui revient à sa position initiale si on ne clique par sur ce bouton (mouseOver), et qui devrait se 'fixer' sous le bouton si on clique dessus. (c'est sur ce dernier point que j'ai du mal.)

Pour vous donner une meilleur idée de l'effet, voici le tutoriel que j'ai adapté pour mon menu:
http://css-tricks.com/examples/MagicLine/

Mon problème est donc de redéfinir la position initiale de la boule en fonction du bouton cliqué.
Comme sur le tutorial, j'assigne et/ou enlève une classe .currentItem aux boutons, et positionne la boule par rapport à ce <li> 'classé'. Ma boule ne semble pas tenir compte du .currentItem, et reviens invariablement au premier bouton. A noter que cette classe .currentItem est bien assignée/enlevée aux boutons, puisque les styles CSS changent correctement en fonction du bouton cliqué/survolé.

Je ne vois pas bien où j'ai fait une erreur, et m'arrache les cheveux depuis plusieurs jours sur ce soucis ... J'ai plus trop les idées claires, donc je fais appel à vous pour me venir en aide.

Mon code jQuery pour la baballe:

$(function(){
	
		// Boule Bouton Portfolio
		
		var $el, leftPos, suppPos,
	        $mainNav = $("#navFolio");
	
	    $mainNav.append("<div id='magicBall'></div>");/*Rajoute 'magic Ball' à liste*/
	    var $magicBall = $("#magicBall"); 
	
	    $magicBall
	        .css("left", $(".currentItem").position().left+($(".currentItem").width()/2)-3) /*sa position + moitié de largeur de li*/
	        .data("origLeft", $magicBall.position().left) /*stock position de bouton de page active*/
		
		
	    $("#navFolio li").hover(function() 
	    {
	    	suppPos = ($(this).width()/2)-3;
	        $el = $(this);
	        leftPos = $el.position().left+suppPos; /*stock position de lien survolé, + moitié de largeur de li (centrer)*/
	        $magicBall.stop().animate({ /*anime/déplace la 'magic Ball' avec les paramètres précédement collectés*/
	            left: leftPos
	        });
	    },
	    function() /*MouseOver: replace 'magic Ball' en dessous du bouton de la page active*/
	    {
	        $magicBall.stop().animate({
	            left: $magicBall.data("origLeft")
	        },1000); /*retour plus lent/doux*/
	    });
	    
});

Et un autre code où se retrouve le changement de class:

$(function(){
	
	var tabContainers = $('.folioContainer'); /*stocke les différentes tab*/
	tabContainers.hide().filter(':first').show(); /*les hide toutes, et affiche la première*/
	
	$('#navFolio a').click(function()
	{
		tabContainers.hide();
		tabContainers.filter(this.hash).show(); /*affiche tab qui possède 'id' identique à href du bouton (hash->voir DOM)*/
		$('#navFolio a').removeClass('currentItem');
		$(this).addClass('currentItem');
		return false; /*annule fonction boutons (lien)*/
	});
	
});

La petite partie HTML:

<!-- Navigation -->
	
	<div id="navFolio">
		<ul>
			<li><a class="currentItem" href="#logos">logo<span>logo</span></a></li>
			<li><a href="#web">web<span>web</span></a></li>
			<li><a href="#print">print<span>print</span></a></li>
			<li><a href="#illustration">illustration<span>illustration</span></a></li>
		</ul>
		<div class="clear"></div>
	</div>