Changement de class onclick

**moiju** · 27/01/2013, 16h27

Bonjour,
j'ai un problème pour afficher un petit code en jquery.
La première partie fonctionne mais pas la fin.
Il change bien la classe mais ne la prends pas en compte lors du click.
Je sèche, avec vous une idée ? j'ai zappé un truc?

Pour l'instant il ne prend pas en compte le changement de classe ( bien que la div 'click.off' n'existe plus lors du deuxième click...
Merci !

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
$(document).ready(function(){
    $('#click.off').click(function(){
        $('img').animate({
            width: '900px'
        }, 500, 
        function(){
            $('#click.off').removeClass().addClass("on");
 
        });
    });
    $('#click.on').click(function(){
        $('img').animate({
            width: '450px'
        },
        function(){
            $('#click.on').removeClass().addClass("off");
 
        });
 
 
    }); 
 
});

**danielhagnoul** · 27/01/2013, 22h19

Bonsoir

Exemple :

Code css :

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

#divID { width: 100px; height: 100px; border: 1px solid red; background-color: lightgrey; }

Code html :

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

1
2
3
<div id="divID"></div>
 
<img src="http://danielhagnoul.developpez.com/images/imageTest.png">

Code javascript :

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
$( function(){
 
	/*
	 * Si la division d'ID "divID" ne possède pas
	 * la classe "tropLarge" on agrandit la largeur
	 * de l'image de 450 px. Dans le cas inverse, on
	 * réduit la largeur de 450 px.
	 * 
	 * On termine en ajoutant ou en retirant la classe
	 *  "tropLarge" à la division 
	 * (http://api.jquery.com/toggleClass/).
	 */
 
    $( "#divID" ).on( "click", function(){
    	var jObj = $( this );
 
    	if ( ! jObj.hasClass( "tropLarge" ) ){
        	$( 'img' ).animate({ "width" : "+=450px" }, 3000 );
    	} else {
        	$( 'img' ).animate({ "width" : "-=450px" }, 3000 );
    	}
 
    	jObj.toggleClass( "tropLarge" );
    });
 
});

**Bovino** · 28/01/2013, 08h18

Pour l'instant il ne prend pas en compte le changement de classe

Non, ce n'est pas tout à fait ça...

Quand tu écris

Code :

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

$('#click.off').on("click", function(){...});

jQuery affecte à tous les éléments du document ayant la classe "off" l'action liée à l'événement.
Mais quand tu modifies la classe, les éléments recevant cette classe n'ont pas été "initialisés" donc le clic ne les concerne pas !
Il faut soit utiliser les événements délégués, soit gérer tous les éléments dans un même événement dans lequel tu différencieras ceux ayant la classe on de ceux ayant off.

En tout état de cause, lorsque tu affectes un événement, seuls les éléments présents dans le DOM au moment de l'affectation sont concernés.

**SpaceFrog** · 28/01/2013, 08h45

Code :

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

$('#click.off')

jQuery affecte à tous les éléments du document ayant la classe "off" l'action liée à l'événement.

Pas tout à fait Bovino, l'élément unique ayant pour id click et pour class .off

**Bovino** · 28/01/2013, 08h52

Oui, au temps pour moi :

jQuery affecte à l'élément du document ayant l'id click et la classe "off" l'action liée à l'événement.

**moiju** · 28/01/2013, 14h16

Merci beaucoup, avec ce code ça fonctionne :

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
$(document).ready(function(){
    $( function(){
 
 
 
        $( '.divID img' ).on( "click", function(){
            var jObj = $( this );
 
            if ( ! jObj.hasClass( "on" ) ){
                $( this ).animate({
                    "width" : "+=450px", 
                    "height" : "+=450px"
                }, 500 );
            } else {
                $( this ).animate({
                    "width" : "-=450px", 
                    "height" : "-=450px"
                }, 500 );
            }
 
            jObj.toggleClass( "on" );
        });
 
    });
});

Mais maintenant j'aimerais que sur certaines div (à définir) l'effet animate s’effectue de droite a gauche ( c'est de gauche à droite par défaut ),
je cherche mais ne trouve pas ... est ce possible ??
Merci!

**danielhagnoul** · 28/01/2013, 21h40

Vu les transformations que vous avez fait subir à mon code pour l'adapter au vôtre, il serait prudent de nous donner le contexte (HTML, CSS, JS) avant de poursuivre.

**moiju** · 29/01/2013, 12h04

Donc voici mes codes.

CSS

Code css :

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
html, body {
    height: 100%;
    background-color: gray;
}
html {
    min-width: 100%;
}
 
img {
    border-radius: 5px;
    width: 450px;
    height: 450px;
    margin: 0;
    padding: 0;
}
 
#container {
    position: relative;
    margin: 0 auto;
    width: 950px;
    background-color: darkgray;
}
.divID {
    display: inline-block;
    position: relative;
}

HTML

Code html :

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
<!DOCTYPE html>
 
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="css/reset.css" />
        <link rel="stylesheet" href="css/style.css" />
        <script src="js/jquery-1.9.0.js" type="text/javascript"></script>
        <script src="js/functions3.js" type="text/javascript"></script>  
 
        <title>site</title>
 
 
    </head>
 
    <body>
        <div id="container">
            <div class="divID">
                <img src="images/vignettes/1.jpg" alt="" >
            </div>
            <div class="divID">
                <img src="images/vignettes/6.jpg" alt="" >
            </div>
            <div class="divID">
                <img src="images/vignettes/7.jpg" alt="" >
            </div>
        </div>
    </body>
</html>

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
21
22
23
24
25
$(document).ready(function(){
    $( function(){
 
 
 
        $( '.divID img' ).on( "click", function(){
            var jObj = $( this );
 
            if ( ! jObj.hasClass( "on" ) ){
                $( this ).animate({
                    "width" : "+=450px", 
                    "height" : "+=450px"
                }, 500 );
            } else {
                $( this ).animate({
                    "width" : "-=450px", 
                    "height" : "-=450px"
                }, 500 );
            }
 
            jObj.toggleClass( "on" );
        });
 
    });
});

Quand je clique sur une image elle s'agrandit bien avec animate à partir du coin haut gauche, (celle qui était dans la div à sa droite glisse alors en bas à gauche) j'aimerais que les images qui ce trouves à droite s'agrandissent à partir du coin haut droit...( afin d'éviter qu'il y ai un "trou" sans image ) est ce possible ?
Et comment définir que telle image placé à gauche ou à droite s'anime de telle ou telle façon ??
Je continue à chercher mais sans résultat pour le moment...
Si quelqu'un à une piste à me donner se serait super !
Merci!

**danielhagnoul** · 29/01/2013, 22h49

Ce n'est qu'un problème de réglage CSS. Il faut que la taille des images, la taille de la déformation de l'image et la taille des conteneurs soient en harmonie. Et aligner les blocs en ligne au sommet du conteneur. Exemple :

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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		head.js( "http://danielhagnoul.developpez.com/lib/raphael-min.js", 
			{ "jq" : "http://code.jquery.com/jquery-2.0.0b1.js" },
			"http://code.jquery.com/jquery-migrate-1.0.0.js",
			"http://code.jquery.com/color/jquery.color-2.1.1.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/base.js" );
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<style>
		.hyphens { -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
		nav { display: table-cell; text-align: left; border: 0.1rem dotted grey; width: 25rem; background-color: orange; }
		aside { display: table-cell; text-align: left; border: 0.1rem dotted grey; width: 25rem; background-color: yellow; }
		article { display: table-cell; text-align: justify; border: 0.1rem dotted grey; }
		.table1 { border-collapse: separate; border-spacing: 3rem; empty-cells: hide; caption-side: top; }
		.ligne { display: table-row; }
		.caption { display: table-caption; text-align: center; }
		.table1 .ligne { min-height: 30rem; }
		.table1 article { min-width: 40rem; vertical-align: top; }
 
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
		#container {
		    position: relative;
		    margin: 0 auto;
		    margin-top:12px;
		    margin-bottom:24px;
		    min-width: 900px;
		    max-width: 1024px;
		    min-height:500px;
		    background-color: darkgray;
		}
		.divID {
		    position: relative;
		    display: inline-block;
		    vertical-align:top;
		}
		img {
		    width: 200px;
		    height: 200px;
		    margin: 0;
		    padding: 0;
		}
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="http://www.developpez.net/forums/d1302316/\
				webmasters-developpement-web/javascript/bibliotheques-frameworks/\
				jquery/changement-class-onclick/">Lien</a>
			</h2>
		</hgroup>
	</header>
 
    <div id="container">
        <div class="divID">
            <img src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="" >
        </div>
        <div class="divID">
            <img src="http://danielhagnoul.developpez.com/images/avatarDVJH.jpg" alt="" >
        </div>
        <div class="divID">
            <img src="http://danielhagnoul.developpez.com/images/flocon1.png" alt="" >
        </div>
    </div>
 
	<!--
	<section class="conteneur">				
		<section class="table1">
			<section class="caption">
				<h3>Sous-titre</h3>
			</section>
			<section class="ligne">
				<article>
 
 
				</article>
				<article>
 
 
				</article>
			</section>
		</section>
	</section>
	-->
 
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-01-28T10:36:10.418+01:00" pubdate>2013-01-28T10:36:10.418+01:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
	<script>
		"use strict";
 
		head( "jq", function(){ // Voir : http://headjs.com/
 
	        $( '.divID img' ).on( "click", function(){
	            var jObj = $( this );
 
	            if ( ! jObj.hasClass( "on" ) ){
	                $( this ).animate({
	                    "width" : "+=200px", 
	                    "height" : "+=200px"
	                }, 500 );
	            } else {
	                $( this ).animate({
	                    "width" : "-=200px", 
	                    "height" : "-=200px"
	                }, 500 );
	            }
 
	            jObj.toggleClass( "on" );
	        });
 
		});
	</script>
</body>
</html>

**moiju** · 30/01/2013, 12h54

En fait ce n'est pas ce que je veux faire.
Pour l'instant j'ai mis 3 div/image mais par la suite il y'en aura plus (20 voir +).
Donc elles seront en colonne (par 2 a priori) d’où mon problème avec les images qui se trouve a droite ...

Est ce que si je récupère, dans mon script, les coordonnées (ordonnée X dans ce cas) et que je lui dit que si l'image a telle valeur X (x>450px) tu déplace la div précédente (qui se trouve à sa gauche) de 450px en bas et que tu anime cette div (x>450px) de droite à gauche (en prenant comme référence le coin haut droit)...
ça pourrait fonctionner ??
puis je mettre plusieurs condition (if) à la suite ou il faut que j'utilise if else ??
Si j'arrive à écrire un code fonctionnel je le posterais.
Merci!

**danielhagnoul** · 30/01/2013, 22h30

Je viens de faire un test de mon code du message n° 9 avec 13 images au lieu de 3, il y a les déformations de la page provoquée par l'agrandissement d'une image, mais je ne vois pas et je ne comprends pas le "problème du trou à droite".

**moiju** · 31/01/2013, 12h34

J'ai repris ton code et ai modifié les dimensions de la div "container", c'est plus proche de ce que je veux 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
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
 
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		head.js( "http://danielhagnoul.developpez.com/lib/raphael-min.js", 
			{ "jq" : "http://code.jquery.com/jquery-2.0.0b1.js" },
			"http://code.jquery.com/jquery-migrate-1.0.0.js",
			"http://code.jquery.com/color/jquery.color-2.1.1.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/base.js" );
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<style>
		.hyphens { -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
		nav { display: table-cell; text-align: left; border: 0.1rem dotted grey; width: 25rem; background-color: orange; }
		aside { display: table-cell; text-align: left; border: 0.1rem dotted grey; width: 25rem; background-color: yellow; }
		article { display: table-cell; text-align: justify; border: 0.1rem dotted grey; }
		.table1 { border-collapse: separate; border-spacing: 3rem; empty-cells: hide; caption-side: top; }
		.ligne { display: table-row; }
		.caption { display: table-caption; text-align: center; }
		.table1 .ligne { min-height: 30rem; }
		.table1 article { min-width: 40rem; vertical-align: top; }
 
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
		#container {
		    position: relative;
		    margin: 0 auto;
		    margin-top:12px;
		    margin-bottom:24px;
		    width: 405px;
		    min-height:500px;
		    background-color: darkgray;
		}
		.divID {
		    position: relative;
		    display: inline-block;
		    vertical-align:top;
		}
		img {
		    width: 200px;
		    height: 200px;
		    margin: 0;
		    padding: 0;
		}
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="http://www.developpez.net/forums/d1302316/\
				webmasters-developpement-web/javascript/bibliotheques-frameworks/\
				jquery/changement-class-onclick/">Lien</a>
			</h2>
		</hgroup>
	</header>
 
    <div id="container">
        <div class="divID">
            <img src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="" >
        </div>
        <div class="divID">
            <img src="http://danielhagnoul.developpez.com/images/avatarDVJH.jpg" alt="" >
        </div>
        <div class="divID">
            <img src="http://danielhagnoul.developpez.com/images/flocon1.png" alt="" >
        </div>
                <div class="divID">
            <img src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="" >
        </div>
        <div class="divID">
            <img src="http://danielhagnoul.developpez.com/images/avatarDVJH.jpg" alt="" >
        </div>
        <div class="divID">
            <img src="http://danielhagnoul.developpez.com/images/flocon1.png" alt="" >
        </div>
                <div class="divID">
            <img src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="" >
        </div>
        <div class="divID">
            <img src="http://danielhagnoul.developpez.com/images/avatarDVJH.jpg" alt="" >
        </div>
        <div class="divID">
            <img src="http://danielhagnoul.developpez.com/images/flocon1.png" alt="" >
        </div>
                <div class="divID">
            <img src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="" >
        </div>
        <div class="divID">
            <img src="http://danielhagnoul.developpez.com/images/avatarDVJH.jpg" alt="" >
        </div>
        <div class="divID">
            <img src="http://danielhagnoul.developpez.com/images/flocon1.png" alt="" >
        </div>
    </div>
 
	<!--
	<section class="conteneur">				
		<section class="table1">
			<section class="caption">
				<h3>Sous-titre</h3>
			</section>
			<section class="ligne">
				<article>
 
 
				</article>
				<article>
 
 
				</article>
			</section>
		</section>
	</section>
	-->
 
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-01-28T10:36:10.418+01:00" pubdate>2013-01-28T10:36:10.418+01:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
	<script>
		"use strict";
 
		head( "jq", function(){ // Voir : http://headjs.com/
 
	        $( '.divID img' ).on( "click", function(){
	            var jObj = $( this );
 
	            if ( ! jObj.hasClass( "on" ) ){
	                $( this ).animate({
	                    "width" : "+=200px", 
	                    "height" : "+=200px"
	                }, 500 );
	            } else {
	                $( this ).animate({
	                    "width" : "-=200px", 
	                    "height" : "-=200px"
	                }, 500 );
	            }
 
	            jObj.toggleClass( "on" );
	        });
 
		});
	</script>
</body>
</html>

Quand on clique sur une image se trouvant à droite elle descend et s'agrandit de gauche à droite, ce qui fait un trou sans image à sa place initiale.
Je voudrais soit:
- que ce trou sois rempli par une autre image automatiquement,
- et ce serait mieux que cette image s'agrandisse de droite à gauche, qu'elle reste à sa place, et que l'image à sa gauche ( la div précedente ) se place en dessous pour laisser la place à cette div agrandie...
C'est pas simple mais j'aimerais bien y arriver.

**danielhagnoul** · 01/02/2013, 03h14

Maintenant, je vois le "problème du trou à droite".

Proposition de solution, pas extraordinaire, mais...

Si la solution convient et si c'est nécessaire, je commenterais le 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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		head.js( "http://danielhagnoul.developpez.com/lib/raphael-min.js", 
			{ "jq" : "http://code.jquery.com/jquery-2.0.0b1.js" },
			"http://code.jquery.com/jquery-migrate-1.0.0.js",
			"http://code.jquery.com/color/jquery.color-2.1.1.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/base.js" );
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<style>
		.hyphens { -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
		nav { display: table-cell; text-align: left; border: 0.1rem dotted grey; width: 25rem; background-color: orange; }
		aside { display: table-cell; text-align: left; border: 0.1rem dotted grey; width: 25rem; background-color: yellow; }
		article { display: table-cell; text-align: justify; border: 0.1rem dotted grey; }
		.table1 { border-collapse: separate; border-spacing: 3rem; empty-cells: hide; caption-side: top; }
		.ligne { display: table-row; }
		.caption { display: table-caption; text-align: center; }
		.table1 .ligne { min-height: 30rem; }
		.table1 article { min-width: 40rem; vertical-align: top; }
 
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
		#container {
		    position: relative;
		    margin: 0 auto;
		    margin-top:12px;
		    margin-bottom:24px;
		    width: 405px;
		    min-height:500px;
		    background-color: darkgray;
		}
		.divID {
		    position: relative;
		    display: inline-block;
		    vertical-align:top;
		}
		img {
			position: relative;
			top: 0px;
			left: 0px;
		    width: 200px;
		    height: 200px;
		    margin: 0;
		    padding: 0;
		}
		img .on { }
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="http://www.developpez.net/forums/d1302316/\
				webmasters-developpement-web/javascript/bibliotheques-frameworks/\
				jquery/changement-class-onclick/">Lien</a>
			</h2>
		</hgroup>
	</header>
 
    <div id="container">
        <div class="divID">
            <img data-img-right="false" src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="" >
            <img data-img-right="true" src="http://danielhagnoul.developpez.com/images/avatarDVJH.jpg" alt="" >
            <img data-img-right="false" src="http://danielhagnoul.developpez.com/images/flocon1.png" alt="" >
            <img data-img-right="true" src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="" >
            <img data-img-right="false" src="http://danielhagnoul.developpez.com/images/avatarDVJH.jpg" alt="" >
            <img data-img-right="true" src="http://danielhagnoul.developpez.com/images/flocon1.png" alt="" >
            <img data-img-right="false" src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="" >
            <img data-img-right="true" src="http://danielhagnoul.developpez.com/images/avatarDVJH.jpg" alt="" >
            <img data-img-right="false" src="http://danielhagnoul.developpez.com/images/flocon1.png" alt="" >
            <img data-img-right="true" src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="" >
            <img data-img-right="false" src="http://danielhagnoul.developpez.com/images/avatarDVJH.jpg" alt="" >
            <img data-img-right="true" src="http://danielhagnoul.developpez.com/images/flocon1.png" alt="" >
         </div>
    </div> 
 
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-01-28T10:36:10.418+01:00" pubdate>2013-01-28T10:36:10.418+01:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d?exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
	<script>
		"use strict";
 
		head( "jq", function(){ // Voir : http://headjs.com/
 
	        $( '.divID > img' ).on( "click", function(){
	        	var jObj = $( this ),
	        		jObjFirstImg = $( '.divID > img:first' ),
	        		boolAnimate = true,
	        		boolRight = jObj.data( "imgRight" );
 
                $( '.divID > img.on' ).each( function( i, item ){
 
                	if ( jObj[0] == item ){
                		boolAnimate = false;
                	}
 
                	$( item ).removeClass( "on" ).animate({
	                    "width" : "-=200px", 
	                    "height" : "-=200px"
	                }, 500, function(){
			        	if ( jObjFirstImg.data( "imgClone" ) == true ){
			        		jObjFirstImg.remove();
			        	}
	                });
	            });				
 
	            if ( boolAnimate ){
 
	            	if ( boolRight ){
	            		jObj.parent().prepend( jObj.clone().attr( "data-img-clone", true ) );
	            	}
 
	            	jObj.addClass( "on" ).animate({
	                    "width" : "+=200px", 
	                    "height" : "+=200px"
	                }, 500 );
		        }
	        });
 
		});
	</script>
</body>
</html>

Changement de class onclick

jQuery

Discussions similaires

Partager

Partager