Slide de div Jquery

Version imprimable

Slide de div Jquery

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:

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.

05/06/2010, 18h15
danielhagnoul

Bonsoir.

Pourriez-vous nous donner votre code HTML et CSS ?

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:

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

Bonsoir.

Dans l'intervalle j'ai eu le temps de réaliser un exemple :

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
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.

05/06/2010, 19h19
soohikei

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