Déplacement élément <li> avec Jquery

Bonsoir à tous,
je suis en pleine reconstruction de mon portfolio pour mes études et là je dois dire que je suis bloqué.
Je vous explique...
Dans ce nouveau portfolio j'essaie d'apprendre le jquery en même temps ! Mais je rencontre pas mal de problèmes :

- J'ai un menu vertical. Je veux que lorsqu'on survole les éléments <li>, ils se déplacent de 30px vers la droite. J'ai réussi à faire cela comme ça :
HORS LIGNE


Ensuite second problème,
j'aimerais que lorsqu'on clique sur un élément <li> (on l'appelle n°1) celui-ci reste à 30px d'écart des autres éléments <li>. Et lorsqu'on clique sur un autre élément <li> (on l'appelle n°2), il (n°2) se décale à son tour de 30px mais par contre le précèdent (n°1) se remet en position initiale.

J'ai cru comprendre que c'était avec la fonction .click mais je ne vois pas comment "fusionner" cette fonction avec la fonction .hover que j'ai faite précédemment.

HORS LIGNE

Alors si quelqu'un à le temps de m'expliquer comment résoudre ces petits problèmes, je lui en serais très reconnaissant .

Bonne soirée à vous.
Emmanuel
Modifié par ManiManu (04 Jul 2015 - 12:44)

Bonjour,

Il semblerait que le souci soit réglé pour IE7 car chez moi ça fonctionne.

Pour l'histoire de l'élément décalé lorsqu'il a été cliqué, il va falloir passer par une classe.
Il faut attribuer une nouvelle classe au clic sur l'élément, puis agir sur cet élément pour l'animer.

$("#menu li").click(function(){

   //on retire la class .current sur le LI porteur de cette classe et on simule un mouseleave (fonction callback de hover)
   $("#menu li.current").removeClass('current').trigger('mouseleave'); 

   // on attribue la class au LI cliqué et on simule un mouseenter, équivalent de la fonction hover
   $(this).addClass('current').trigger('mouseenter'); 

});

Dans la fonction d'animation existante il faudra changer le sélecteur

ul#menu li

par

ul#menu li:not('.current')

afin d'affecter uniquement les éléments non-porteurs de cette classe.

C'est une proposition, il y a peut-être plus simple, mais dans l'immédiat je ne vois pas.

Bonne continuation
Modifié par Riku Asakura (28 Mar 2011 - 18:55)

Salut et merci pour ton aide,

mais le soucis, c'est que je ne sais pas trop quoi en faire.

J'ai réussi à bidouiller ça (avec l'aide de quelqu'un) pour animer mon menu:

$(document).ready(function(){
	// Intialisation du menu
	var sCurrentAction = 'action1';
	
	
	
	$('#' + sCurrentAction).find('img').animate({ left: '30px' }, {queue: false, duration: 600});

	$('ul#menu li').hover(function(){
				$(this).find('img').animate({ left:'30px' },{queue:false,duration:600});	
			},
			function(){
				if (this.id != sCurrentAction)
					$(this).find('img').animate({ left:'0px' },{queue:false,duration:600});
			});
				
	$('ul#menu li').click(function () {
		// On retire l'ancien "action"
		if (sCurrentAction != '')
			$('#' + sCurrentAction).find('img').animate({ left: '0px' }, {queue: false, duration: 600});

		// On met à jour l'action actuelle
		sCurrentAction = this.id;
		
	});
	
});

Mais sur mon site, j'ai fais un systeme de scrolling animé dont voici le code :

$(document).ready(function(){
	$('a[href^=#]').click(function() {
		cible=$(this).attr('href');
		scrollTo(cible);
		return false;
	});
	
	
	
});

function scrollTo(cible){
	if($(cible).length>=1){
		hauteur=$(cible).offset().top;
	}
	else{
		hauteur=$("a[name="+cible.substr(1,cible.length-1)+"]").offset().top;
	}
	hauteur -= (windowH()-$(cible).height())/2;
	$('html,body').animate({scrollTop: hauteur}, 1500,'easeInQuint');
	return false;
}

function  windowH(){
	if (window.innerHeight) return window.innerHeight  ;
	else{return $(window).height();}
}

Le soucis c'est que lorsque je clique sur un lien du menu, je suis dirigé vers mon ancrage mais par contre l'onglet actif ne reste pas éloigné de 30px comme je voudrais.



Merci d'avance et bonne soirée =)
Modifié par ManiManu (04 Jul 2015 - 12:45)