Evénement hover ou mouseout ?

[selinav]

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 :

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]

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

Code :

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]

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 :

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);
	}
});

[kalimukti]

Merci bcp danielhagnoul
(moi aussi la question m'intéressait)
Ca marche nickel !

[selinav]

merci beaucoup, mais que pensez-vous de mon code?

[kalimukti]

Envoyé par selinav

merci beaucoup, mais que pensez-vous de mon code?

tu l'insères comment par rapport au code original ?
(parce que j'ai essayé vite fait hier soir et tel que je l'ai inséré, y marchait po )

[danielhagnoul]

Bonjour

Oops ! En lisant vos réponses, je m'aperçois que je ne vous ai pas donné la dernière version, celle qui tient compte de l'entrée dans un volet déjà ouvert. Dans ce cas précis, la version précédente provoque une bogue.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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);
 
		if (jObj[0] != lastLI[0]){
			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);
	}
});

[selinav]

Voici le code complet qui fonctionne

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
<script type="text/javascript">
	(function ($) {
		$(document).ready(function() {
 
 
			$(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();
							last=$this;
						},
						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);
						}
					);					
 
				});
 
				$(function() {
					$('.accordion ').mouseout(
						function () {
							//on laisse le dernier ouvert
							var $this = last;
							$this.stop().animate({'width':'340px'},500);
							$('.heading',$this).stop(true,true).hide();
							$('.bgDescription',$this).stop(true,true).show();
							$('.description',$this).stop(true,true).show();
 
							//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);
							});
						}
 
					);					
 
				});
 
 
			});
		}(jQuery));
	</script>

[kalimukti]

ok, merci (danielhagnoul pour la v2 de code ) et selinav pour l'ensemble de ton code
vu, selinav, ça fonctionne, donc on peut dire que ton code est bon
et le principe est le même que dans le code de danielhagnoul, mais je préfère le code de daniel car plus concis, donc aussi plus clair.. si je reviens sur un code comme ça dans deux mois, je le relis assez facilement et assez rapidement... alors que ton code me semblera plus obscur (moi aussi j'ai tendance à faire plus long que nécessaire... et des fois je me maudis quand je fais du jquery verbeux...)
(en plus, la gestion des variables: last ne dis pas le dernier quoi... avec lastLI, je sais tout de suite ce que je manipule)