Afficher/cacher div en glissant

Invité · 13/06/2011, 12h23

Bonjour à tous.

Plutôt que de longs discours, voici mon code :

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
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
 
<html>
	<head>
		<script src="jquery.min.js" type="text/javascript"></script>
 
		<style>
			html, body {
				margin: 0;
				padding: 0;
				font-family: Verdana;
				font-size: 12px;
			}
			a {				
				margin: 20px;
				color: #f63718;
				font-size: 3em;
			}
			div.content {
				width: 700px;
				margin: 5px;
			}
			div.content div {
				display: inline-block;
				width: 200px;
				height: 50px;
				padding-left: 20px;
				color: #FFFFFF;
				margin: 5px;
			}
			.type_1 {
				background-color: #4a4aaa;				
			}
			.type_2 {
				background-color: #4aaa4a;
			}
			.type_3 {
				background-color: #aa4a4a;
			}
		</style>
 
		<script type="text/javascript">
			$().ready(function () {
				var time = 1500;
				$('#show_all').click(function (e) {
					e.preventDefault();
					$('.type_1').fadeIn(time);
					$('.type_2').fadeIn(time);
					$('.type_3').fadeIn(time);
				});
				$('#show_type_1').click(function (e) {
					e.preventDefault();
					$('.type_1').fadeOut(time).fadeIn(time);
					$('.type_2').fadeOut(time);
					$('.type_3').fadeOut(time);
				});
				$('#show_type_2').click(function (e) {
					e.preventDefault();
					$('.type_1').fadeOut(time);
					$('.type_2').fadeOut(time).fadeIn(time);
					$('.type_3').fadeOut(time);
				});
				$('#show_type_3').click(function (e) {
					e.preventDefault();
					$('.type_1').fadeOut(time);
					$('.type_2').fadeOut(time);
					$('.type_3').fadeOut(time).fadeIn(time);
				});
			});
		</script>
	</head>
	<body>
 
		<a href="" id="show_all">Tous</a>
		<a href="" id="show_type_1">Type_1</a>
		<a href="" id="show_type_2">Type_2</a>
		<a href="" id="show_type_3">Type_3</a>
 
		<br/>
 
		<div class="content">
			<div class="type_1"><p>je suis de type 1</p></div>	
			<div class="type_2"><p>je suis de type 2</p></div>		
			<div class="type_3"><p>je suis de type 3</p></div>		
			<div class="type_2"><p>je suis de type 2</p></div>		
			<div class="type_3"><p>je suis de type 3</p></div>		
			<div class="type_1"><p>je suis de type 1</p></div>		
			<div class="type_2"><p>je suis de type 2</p></div>		
			<div class="type_1"><p>je suis de type 1</p></div>		
			<div class="type_1"><p>je suis de type 1</p></div>		
			<div class="type_3"><p>je suis de type 3</p></div>
		</div>
 
	</body>
</html>

Ce que je souhaite :
Une transition plus douce entre l'affichage d'un type i vers l'affichage d'un type j (ou tous les types).

Exemple :
Tous les types étant affichés, je clique sur Type 1. Seules les div de type 1 s'affichent.
Je clique ensuite sur Type 2. Les div se réorganisent, puis ceux de type 1 s'évanouissent (fade out) tandis que ceux de type 2 apparaissent (fade in).
Ce que je voudrais, c'est qu'avant le fade out des div de type 1, ces derniers "glissent" vers leurs nouvelles positions.

Contraintes : les positions ne peuvent être déterminées au moment de coder puisqu'on doit pouvoir rajouter des div de n'importe quel type dans n'importe quel ordre. De plus, la largeur du div#content sera amenée à varier, ce qui impliquerait qu'on puisse afficher non pas 3, mais 2, 4 voire 5 div par ligne.

Comment réaliser cette transition ?

Merci.

**beejeridou** · 13/06/2011, 13h04

Hello, si tu veux que les effets s'enchainent à la suite et non en même temps avec jQuery, tu dois utiliser les callbacks.

Dans ton cas:

Code :

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

1
2
3
4
5
6
 
//Les effets se passent en meme temps:
$('.type_2').fadeOut(time).fadeIn(time);
 
//les effets se passent l'un après l'autre
$('.type_2').fadeOut(time, function() {$('.type_2').fadeIn(time);} );

[Edit] Erf, en fait, je crois que j'ai rien compris à la question initiale^^

As tu essayé animate() ?

Code :

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

1
2
 
$('#monObjet').animate({top:6, left:60});

Après, tu dois trouver le bon algo pour calculer tes positions x et y en choppant la taille de tes div et la taille de la fenêtre.

Code :

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

1
2
 
$('#monObjet').width(); $(window).height();

Invité · 13/06/2011, 14h14

Salut beejeridou. Merci pour tes réponses.

Et non, les deux réponses sont utiles de mon point de vue, même si la seconde est effectivement plus pertinente.

L'enchaînement serait:
- animation 1 : les div#type_1 se décalent en glissant (glissement amorti, un joli truc quoi)
- animation 2 :
- - les div#type_1 fade out
- - et les div#type_2 fade in en même temps

Ok, donc si j'ai bien compris, à moins de passer par un algorithme (ce que j'espérais éviter), cet effet n'est pas possible.

**danielhagnoul** · 13/06/2011, 17h22

Bonsoir

Normalement la solution proposée par @beejeridou, utiliser une fonction de rappel (callback) est la bonne. Mais cela ne fonctionne pas, les divisions du type souhaité ont besoin d'un temps supplémentaire à celui de l'animation pour se réarranger dans les coulisses avant d'apparaître sur la scène. Voici la solution qui semble fonctionner, mais elle ne me plaît pas, car elle fait appel a setTimeout.

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
$(function(){
	var time = 1500;
 
	$('#show_all').click(function(e){
		$("[class^='type_']").fadeOut(1500);
 
		setTimeout(function(){
			$("[class^='type_']").fadeIn(1500);
		}, 2000);
 
		return false;
	});
 
	$('#show_type_1').click(function(e){
		$("[class^='type_']").fadeOut(1500);
 
		setTimeout(function(){
			$(".type_1").fadeIn(1500);
		}, 2000);
 
		return false;
	});
 
	$('#show_type_2').click(function(e){
		$("[class^='type_']").fadeOut(1500);
 
		setTimeout(function(){
			$(".type_2").fadeIn(1500);
		}, 2000);
 
		return false;
	});
 
	$('#show_type_3').click(function(e){
		$("[class^='type_']").fadeOut(1500);
 
		setTimeout(function(){
			$(".type_3").fadeIn(1500);
		}, 2000);
 
		return false;
	});
});

Invité · 13/06/2011, 22h57

Bonsoir,

Que signifie ceci : [class^='type_'] ?
On peut déduire "le nom de la classe commence par type_", mais je ne connais pas ce genre de syntaxe, comment ça s'utilise, etc. (je débute en JS)

Par ailleurs, merci pour ton code, mais il ne présente pas le comportement souhaité. Ici, lors de l'affichage d'un nouveau type, toutes les div affichées s'évanouissent, puis ensuite seulement les nouvelles apparaissent, déjà sagement rangées dans l'ordre (alignées de gauche à droite, et de bas en haut).

Alors que je voudrais que celles déjà affichées se décalent ("glissent") pour laisser apparaître les nouvelles (dans l'ordre dans lequel elles apparaissent dans le code HTML), puis que les fade in/out aient lieu en même temps sur des div immobiles, et enfin que les nouvelles s'alignent en glissant.