Slide de div Jquery

**soohikei** · 05/06/2010, 16h22

Bonjour, je me lance dans un developpement d'un plugin Jquery qui permet de faire un slide sur des news (Je sais qu'il en existe déja mais mon but c'est d'enfaire un).

j'ai commencé a faire un petit 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
 
function slide(){
	$("#news").show(function() {
		afficheNew();
	});
};
var newsi = 1;
function afficheNew (){
	$("#news"+newsi).slideUp("slow").show().delay(5000).slideUp();
	if (newsi == 2)
		newsi = 1;
	else
		newsi++;
	setTimeout("afficheNew()",5000);
}
$(document).ready(function(){
 
		slide();
});

Ma fonction et ma boucle fonctionnent bien mais l'effet n'est pas celui attendu.

Avec ce code #news2 apparait avant que #news1 ne disparaisse et quand newsi revient à 1 il ne fait pas le slide mais l'affiche normalement !

est ce que vous pourriez me conseiller s'il vous plait.

cordialement.

**danielhagnoul** · 05/06/2010, 18h15

Bonsoir.

Pourriez-vous nous donner votre code HTML et CSS ?

**soohikei** · 05/06/2010, 19h02

oui par contre je n'est pas fait de fichier css etant donné que c'est pour des testes j'ai mis le css directement dans les balise :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD html 5.0 Transitional//EN" "http://www.w3.org/TR/html5/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" media="screen" type="text/css"
	href="vue/css/design.css" />
<link type="text/css" href="design.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="sliders.js"></script>
<script type="text/javascript">
 
</script>
 
<title></title>
 
</head>
 
<body>
<div id="news" style="width: 300px; height: 100px;">
<div id="news1" style="display: none;">news1 : </div>
<div id="news2" style="display: none;">news2 : </div>
 
</div>
</body>
</html>

voila et merci

**danielhagnoul** · 05/06/2010, 19h07

Bonsoir.

Dans l'intervalle j'ai eu le temps de réaliser un 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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<meta name="description" content="Page type">
	<title>Page type</title>
	<style>
		/* BASE */
		body {
			background-color:#ffffff;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
 
		/* TEST */
		#news1, #news2, #news3 {
			display:none;
			width:200px;
			height:200px;
			padding:6px;
			border:1px solid grey;
		}
		#news1 {
			background-color:green;
		}
		#news2 {
			background-color:blue;
		}
		#news3 {
			background-color:red;
		}
	</style>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>	
 	<script>
		var newsi = 1;
		var newsLength = 3;
 
		function afficheNew(){
			var i = newsi;
 
			if (newsi == newsLength){
				newsi = 1;
			} else {
				newsi++;
			}
 
			// animation 5s = 1s + 3s + 1s
			$("#news"+i).slideDown(1000).delay(3000).slideUp(1000);
 
			setTimeout(afficheNew, 5000);
		}
 
		$(function(){
			afficheNew();
		});
	</script>
</head>
<body>
	<div id="news">
		<div id="news1">
			<p>Un mot pour remplir</p>
		</div>
		<div id="news2">
			<p>Un mot pour remplir</p>
		</div>
		<div id="news3">
			<p>Un mot pour remplir</p>
		</div>
	</div>
</body>  
</html>

Désolé, je n'ai plus le temps de lire votre message, car je dois m'absenter.

**soohikei** · 05/06/2010, 19h19

je vais essayer. merci beaucoup en tous les cas. J'aurai aimé savoir quel livre vous me conseiller pour jquery car j'aimerai bien approfondir mes connaissance pour cette bibliotheque et je suis novice.
passez une bonne soirée

Slide de div Jquery

jQuery

Discussions similaires

Partager

Partager