Exercices à résoudre

**RicardoBxl** · 27/12/2013, 11h33

Bonjour,

Avant tout sachez que je ne sais pas où placer les exercices que je vais poster étant donné qu'ils seront à la fois sur le JQuery, le PHP, le HTML et MySQL.
Je fais quoi, je mets tout dans la catégorie mon site ?

Premier exercice: jouer avec les transitions, le click et l'utilisation des class en JQuery

Pour voir ce que cela donne rendez vous sur:
http://myspace.voo.be/rarrabito/www/...ansitions.html

L'URL est sale mais je dois nettoyer le répertoire de cette adresse d"hébergement. Pour rappel MySpace est un serveur que j'utilise à titre privé

Soucis

La fonction "slide" ne fonctionne pas et quand j'ai cliqué sur le bouton "SlideToggle" la classe 'slideToggle' prend le pas sur les autres classes.

Me suis posé la qustion d'une écriture du type removeClass('x').addClass('y')..

Mais me suis dit que vu que j'applique une classe précise à chaque clique il devrait systématiquement écraser la précédente.

Sans me donner la réponse clairement est-ce que je me fourvoie dans ce que je viens de dire ?

Au cas le code ci-dessous:

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
	#menu{			/* La div est positionnée à gauche et je lui donne une couleur et une taille  */
		float:left;
		height:30px;
		width:300px;
		padding:5px 4px 5px 4px;
		background-color: navy;
	}
 
	.btnBg{			/* Les boutons sont alignés à gauche et prennet chacun 20% de l'espace de la div qui les contient */
		float:left;
		width:20%;
		height:90%;
	}
 
	.classShow{   	/* Cette classe affiche #myDiv en jaune et avec une taille de 100 px */
		clear:left;
		width:100px;
		height:100px;
		background-color: yellow;
	}
 
	.classToggle{ 	/* Cette classe affiche #myDiv en vert avec un décalage top:100px et left:150px. La taille de la div est aggrandie à 150*150 */
		width:200px;
		height:200px;
		background-color: green;
		position:relative;
		top:150px;
		left:150px;
	}
 
	.classSlide{	/* Cette classe affiche #myDiv en rouge avec un décalage top:150px et left:400px. La taille de la div est aggrandie à 300*300 */width:300px;
		height:300px;
		background-color: red;
		position:relative;
		top:150px;
		left:400px;
	}
 
	.classSlideToggle{	/* Cette classe affiche #myDiv en noir avec un décalage top:100px et left:500px. La taille de la div est aggrandie à 400*400 */
		width:400px;
		height:400px;
		background-color: black;
		position:relative;
		top:150px;
		left:500px;
	}

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 lang="en">
<head>
	<meta charset="UTF-8">
	<title>Exercice Home 2 Transitions</title>
 
	<style type="text/css">
        </style>
 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" /></script>  
 
</head>
 
<body>
 
<div id="menu">
	<button class="btnBg" id="btnShow">Show</button>
	<button class="btnBg" id="btnHide">Hide</button>
	<button class="btnBg" id="btnToggle">Toggle</button>
	<button class="btnBg" id="btnSlide">Slide</button>
	<button class="btnBg" id="btnSlideToggle">SToggle</button>
</div>
 
<div id="myDiv"></div>
 
</body>
 
</html>

Code js :

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
	<!-- <script type="text/javascript" src="../JQuery/jquery-1.10.2.min.js"></script> -->
	<script type="text/javascript">
	(function($)
		{
			$(document).ready(function()
			{	
				$('#btnShow').click(function(){
					$('#myDiv').addClass('classShow').show('slow');
				});
 
				$('#btnHide').click(function(){
					$('#myDiv').hide('slow');
				});
 
				$('#btnToggle').click(function(){
					$('#myDiv').addClass('classToggle').toggle('slow');
				});
 
				$('#btnSlide').click(function(){
					$('#myDiv').addClass('classSlide').slideUp('slow');
				});
 
				$('#btnSlideToggle').click(function(){
					$('#myDiv').addClass('classSlideToggle').slideToggle('slow');
				});
 
			});
 
	}) (jQuery);
	</script>