Deplacement image auto

**nico72** · 31/07/2010, 12h09

Bonjour,

Je souhaite deplacer une image automatiquement

Cette image de 20 px de large se trouve dans un div de 900px de large.

Elle se situe a gauche.Je voudrais la faire glisser vers la droite au chargement de la page.

J ai rien trouvé avec jquery, ça m etonne

Merci si vous avez des pistes

**nico72** · 31/07/2010, 17h56

Ce que je voudrai, c est pouvoir deplacer une image, ou une div, a l interieur d une autre div.

Une image qui parte de la gauche, pour aller vers la droite par exemple ...

Un carroussel, si j ai bien compris, c est pour faire une galerie d images ...

**danielhagnoul** · 31/07/2010, 22h34

http://api.jquery.com/animate/

**nico72** · 01/08/2010, 16h21

Cela semble bien correspondre a ce que je veux faire

J arrive a faire quelques trucs du genres grossir une div, la faire clignoter.

MAis je ne vois rien pour faire partir une div (ou une image) d un point x pour la faire arriver a un point y

**leymiris** · 01/08/2010, 18h04

Tu peux mettre ton image en background dans un div que tu mets en absolue par rapport au div qui fait 900px. Ensuite tu utilises la fonction animate pour déplacer ce div :

Code :

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

$("#nom_du_div").animate({"left":"880px"},4500,"linear");

le 4500 défini la vitesse, le linear permet d'avoir une vitesse constante. si tu le retires la vitesse sera progressive.

**artotal** · 01/08/2010, 18h43

pour "linear" il faut utilisez le plug in easing ?
Très improbable sans...
deplus l'absolute n'est pas indispensable le relatif fait aussi fait l'affaire, le tout est d'avoir un positionnement.
Ont peux aussi utiliser marginLeft (syntaxe du dom)

**nico72** · 01/08/2010, 20h23

Ca ne marche pas.

FAut il vraiment un plugin pour faire ça ?

**nico72** · 01/08/2010, 20h36

J ai fait ceci

Code :

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

1
2
3
function anim(){
		$("#carre").animate({"left":"500px"},"fast");
	}

Mais rien ne se passe

pas d erreur mais as d anim non plus

**danielhagnoul** · 01/08/2010, 21h28

Bonsoir.

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* BASE */
		body {
			background-color:#dcdcdc;
			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;
		}
 
		/* dvjh */
		h1 {
			text-align:center;
			font-style:italic;
			text-shadow: 4px 4px 4px #bbbbbb;
		}
		h2 {
			text-align:center;
		}
		div#conteneur {
			width:95%;
			height:auto;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
		}
		/*
		div#affiche {
			clear:both;
			margin:12px;
			padding:6px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
		*/
 
		/* TEST */
		#test {
			position:relative;
			top:12px;
			left:12px;
			width:100px;
			height:100px;
			background-color:lightGreen;
			border:1px solid gray;
		}
	</style>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
 	<script>
		$(function(){
			// l'élément animé doit avoir une position et une taille de départ
			// déplace vers la droite de 800px en 4s
			// puis déplace vers la gauche de 800px en 4s
			$("#test").animate({"left":"+=800px"}, 4000).animate({"left":"-=800px"}, 4000); 
		});
	</script>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
		<div id="test"></div>
	</div>
</body>  
</html>

**nico72** · 01/08/2010, 21h55

Encore une fois merci a daniel, ça marche

Comment explorer toutes les possibilités de animate ?

Je souhaiterai par exemple que cette animation tourne en boucle ...

**nico72** · 01/08/2010, 22h12

Bon , j ai trouvé setInterval()
et ça marche bien.

J ai malgré tout une erreur js

Code :

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

1
2
3
4
5
6
7
$(function anim(){
			// l'élément animé doit avoir une position et une taille de départ
			// déplace vers la droite de 800px en 4s
			// puis déplace vers la gauche de 800px en 4s
			$("#test").animate({"left":"+=960px"}, 500).animate({"left":"-=960px"}, 500); 
			 setInterval(anim(), 4000);
		});

Si quelqu un voit ...

**danielhagnoul** · 01/08/2010, 22h13

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
/*
 * l'élément animé doit avoir une position et une taille de départ
 * déplace vers la droite de animationLength px en animationDelay/1000 s
 * puis déplace vers la gauche de  animationLength px en animationDelay/1000 s
 */
var animationLength = 800;
var animationDelay = 4000;
 
// la première animation
$("#test")
	.animate({"left":"+=" + animationLength + "px"}, animationDelay)
	.animate({"left":"-=" + animationLength + "px"}, animationDelay);
 
// les animations suivantes
window.setInterval(function(){
	$("#test")
		.animate({"left":"+=" + animationLength + "px"}, animationDelay)
		.animate({"left":"-=" + animationLength + "px"}, animationDelay); 
}, (animationDelay * 2 + 10)); // 0.01s minimum de délai entre animation

**nico72** · 01/08/2010, 22h29

Merci Ddaniel

Pourquoi 2 fonctions ?

[Edit]

J ai supprimé les lignes :

Code :

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

.animate({"left":"-=" + animationLength + "px"}, animationDelay);

Pour ne garder l animation que vers la droite.

la boucle ne s effectue pas a partir du point initial mais a partir de la position de fin de l animation precedente.

Comment faire pour revenir au point de depart ?