Jquery animate Left et Right [Résolu]

20cents · 17/03/2011, 16h06

Bonjour à tous,

Voilà mon problème, j'ai un div conteneur fixe dans lequel je place 3 div différents mais visible seulement un par un en cliquant sur les liens "droite" et "gauche".

Mon bouton droite fonctionne plus ou moins, il affiche bien le div suivant lorsqu'on clique dessus, mais il continue dans le vide lorsque je continue a cliquer il n'y a pas d'arret. Mon bouton gauche lui ne fonctionne pas du tout.

Je débute en Jquery, je suis arrivé à ce résultat gràce à l'API mais je suis coincé.

Vous pouvez m'aider ?

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
 
<html>
<head>
<title>Document sans titre</title>
 
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript"> 
//au chargement de la page 
$(document).ready(function(){ 
 
$(".gauche").click(function(){ 
$("#slidebox")
.animate({"left": "-=304px"}, "slow");
return false; 
}); 
 
$(".droite").click(function(){ 
$("#slidebox")
.animate({"right": "+=304px"}, "slow");
return false;
}); 
 
}); 
</script> 
<style type="text/css"> 
 
#conteneur 
{ 
border:1px solid #000; 
height: 350px; 
width: 284px; 
overflow:hidden; 
position:relative; 
} 
 
#slidebox 
{ 
position:relative; 
width:5000px; 
} 
 
</style>
 
</head>
 
<body>
 
 
 
<div id="conteneur"> 
    <div id="slidebox"> 
        <div style="width:284px; height:350px; float:left; padding:10px;">test cerchuh crhuecuie cuiheicuh cuirheic cuirehciu cirheuich ciurehci cherich ciu</div>
        <div style="width:284px; height:350px;float:left; padding:10px;" >test2 cerchuh crhuecuie cuiheicuh cuirheic cuirehciu cirheuich ciurehci cherich ciu</div>
        <div style="width:284px; height:350px;float:left; padding:10px;">test3 cerchuh crhuecuie cuiheicuh cuirheic cuirehciu cirheuich ciurehci cherich ciu</div>
    </div> 
</div>
 
 
<ul> 
<li><a href="#" class="gauche">gauche</a></li> 
<li><a href="#" class="droite">droite</a></li> 
</ul> 
 
</body>
</html>

Merci d'avance

Vincent

SpaceFrog · 17/03/2011, 16h22

ben soit faut faire
left -= 304 et left+=304

ou

left-=304 et right-= 304

20cents · 17/03/2011, 16h38

Rah merci, je suis stupide

Mais j'ai toujours le probleme pour les limites droite et gauche. Je ne sais pas comment le stopper...

SpaceFrog · 17/03/2011, 16h51

ben fait un test par rapport au offset('left')

20cents · 17/03/2011, 17h14

Merci mais j'ai fait d'une autre facon, pas tres academique mais ca fonctionne bien :p

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
 
 
<script type="text/javascript"> 
//au chargement de la page 
$(document).ready(function(){ 
 
var temp=0;
 
$(".droite").click(function(){ 
if(temp==-586)
{
	return false;
}
else
{
$("#slidebox")
.animate({"left": "-=293px"}, "slow");
temp = temp - 293;
return false;
}
}); 
 
$(".gauche").click(function(){ 
if(temp==0)
{
	return false;
}
else
{
$("#slidebox")
.animate({"left": "+=293px"}, "slow");
temp = temp + 293;
return false;
}
}); 
 
}); 
</script>

Encore merci

SpaceFrog · 17/03/2011, 17h36

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
<script type="text/javascript"> 
//au chargement de la page 
$(document).ready(function(){ 
 
$(".gauche").click(function(){
 $("#slidebox").offset().left>-597  &&  $("#slidebox").offset().left<=11  && $("#slidebox").animate({"left": "-=304"}, "slow");
return false; 
}); 
 
$(".droite").click(function(){ 
alert($("#slidebox").offset().left)
$("#slidebox").offset().left>=-597 && $("#slidebox").offset().left<11 && $("#slidebox").animate({"left": "+=304"}, "slow");
return false;
}); 
 
}); 
</script> 
<style type="text/css"> 
 
#conteneur 
{ 
border:1px solid #000; 
height: 350px; 
width: 284px; 
overflow:hidden; 
position:relative; 
} 
 
#slidebox 
{ 
position:relative; 
width:5000px; 
} 
 
</style>
 
</head>
 
<body>
 
 
 
<div id="conteneur"> 
    <div id="slidebox"> 
        <div style="width:284px; height:350px; float:left; padding:10px;">test cerchuh crhuecuie cuiheicuh cuirheic cuirehciu cirheuich ciurehci cherich ciu</div>
        <div style="width:284px; height:350px;float:left; padding:10px;" >test2 cerchuh crhuecuie cuiheicuh cuirheic cuirehciu cirheuich ciurehci cherich ciu</div>
        <div style="width:284px; height:350px;float:left; padding:10px;">test3 cerchuh crhuecuie cuiheicuh cuirheic cuirehciu cirheuich ciurehci cherich ciu</div>
    </div> 
</div>
 
 
<ul> 
<li><a href="#" class="gauche">gauche</a></li> 
<li><a href="#" class="droite">droite</a></li> 
</ul> 
 
</body>
</html>

17/03/2011, 16h22	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	ben soit faut faire left -= 304 et left+=304 ou left-=304 et right-= 304 __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

17/03/2011, 16h51	#4
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	ben fait un test par rapport au offset('left') __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

17/03/2011, 16h38	#3
20cents Nouveau Membre du Club Étudiant Inscription : juin 2006 Messages : 78 Détails du profil Informations personnelles : Âge : 24 Localisation : Belgique Informations professionnelles : Activité : Étudiant Informations forums : Inscription : juin 2006 Messages : 78 Points : 27 Points : 27	Rah merci, je suis stupide Mais j'ai toujours le probleme pour les limites droite et gauche. Je ne sais pas comment le stopper...
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email