Deplacement image auto

Version imprimable

31/07/2010, 12h09
nico72

Deplacement image auto

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
31/07/2010, 17h56
nico72

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 ...
31/07/2010, 22h34
danielhagnoul

http://api.jquery.com/animate/
01/08/2010, 16h21
nico72

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
01/08/2010, 18h04
leymiris

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:

$("#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.
01/08/2010, 18h43
artotal

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)
01/08/2010, 20h23
nico72

Ca ne marche pas.

FAut il vraiment un plugin pour faire ça ?
01/08/2010, 20h36
nico72
J ai fait ceci
Code:

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

pas d erreur mais as d anim non plus

Bonsoir.

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

01/08/2010, 21h55
nico72

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

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

J ai malgré tout une erreur js

Code:

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

Exemple :

Code:

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

01/08/2010, 22h29
nico72

Merci Ddaniel

Pourquoi 2 fonctions ?

[Edit]

J ai supprimé les lignes :

Code:

.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 ?
01/08/2010, 22h56
danielhagnoul

Citation:

Envoyé par nico72

Pourquoi 2 fonctions ?

Sinon l'animation ne démarre pas à l'ouverture de la page, mais seulement après (animationDelay * 2 + 10)/1000 s

Citation:

Envoyé par nico72

Comment faire pour revenir au point de depart ?

Ne pas supprimer l'animation qui retourne la division animée à son point de départ. :mouarf: