Evénement hover ou mouseout ?

**selinav** · 27/10/2011, 16h34

Bonjour,

Je reprends le script de http://tympanus.net/Tutorials/ElegantAccordion/ permettant de mettre un joli accordéon dynamique, toutefois j'aimerais le personnaliser pour que lorsque l'on sort de la zone (sorti du ul) le dernier item de liste (li) survolé reste ouvert.

J'ai jeté un oeil, je comprends bien ce qu'il faut faire dans la 2eme fonction, il faut que lorsque l'on sort de la zone on teste si la zone dans laquelle on se trouve est un autre item de liste ou non.
Si oui on exécute le code actuel, sinon on met la taille à 340px sans effet de transition.

Par contre je n'arrive pas à le formaliser, comment savoir si la souris est sorti du "ul" ou pas?

Merci de votre aide

Voici le code js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
$(function() {
	$('.accordion > li').hover(
		function () {
			var $this = $(this);
			$this.stop().animate({'width':'340px'},500);
			$('.heading',$this).stop(true,true).fadeOut();
			$('.bgDescription',$this).stop(true,true).slideDown(500);
			$('.description',$this).stop(true,true).fadeIn();
		},
		function () {
			var $this = $(this);
			$this.stop().animate({'width':'150px'},1000);
			$('.heading',$this).stop(true,true).fadeIn();
			$('.description',$this).stop(true,true).fadeOut(500);
			$('.bgDescription',$this).stop(true,true).slideUp(700);
		}
	);
 
});

**selinav** · 27/10/2011, 16h58

J'ai ajouté le code suivant, ça fonctionne, pensez-vous qu'il y ai un meilleur moyen de le faire ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
$(function() {
	$('.accordion ').mouseout(
		function () {
			//on laisse le dernier ouvert
			var $this = last;
			$this.stop().animate({'width':'340px'},500);
			$('.heading',$this).stop(true,true).fadeOut();
			$('.bgDescription',$this).stop(true,true).slideDown(500);
			$('.description',$this).stop(true,true).fadeIn();
 
			//on ferme les autres
			var $items = $('.accordion').find("li").not(last);
			$items.each(function(i) {
				$autre=$(this);				 
				$autre.stop().animate({'width':'150px'},1000);
				$('.heading',$autre).stop(true,true).fadeIn();
				$('.description',$autre).stop(true,true).fadeOut(500);
				$('.bgDescription',$autre).stop(true,true).slideUp(700);
			});
		}
	);					
});

**danielhagnoul** · 27/10/2011, 22h39

Bonsoir

Lors de l'entrée dans un volet, le code ci-dessous gère l'ouverture du volet et la fermeture du dernier volet ouvert sauf s'il s'agit du même volet.

Ce code remplace tous les autres.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var lastLI = null;
 
$('#accordion > li').mouseenter(function(){
	var $this = $(this);
	$this.stop().animate({'width':'480px'},500);
	$('.heading',$this).stop(true,true).fadeOut();
	$('.bgDescription',$this).stop(true,true).slideDown(500);
	$('.description',$this).stop(true,true).fadeIn();
 
	if (lastLI){
		var jObj = lastLI;
		lastLI = $(this);
		jObj.stop().animate({'width':'115px'},1000);
		$('.heading', jObj).stop(true,true).fadeIn();
		$('.description', jObj).stop(true,true).fadeOut(500);
		$('.bgDescription', jObj).stop(true,true).slideUp(700);
	} else {
		lastLI = $(this);
	}
});