Jquery animate Left et Right

Version imprimable

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:

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

17/03/2011, 16h22
SpaceFrog

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

ou

left-=304 et right-= 304
17/03/2011, 16h38
20cents

Rah merci, je suis stupide :)

Mais j'ai toujours le probleme pour les limites droite et gauche. Je ne sais pas comment le stopper...
17/03/2011, 16h51
SpaceFrog

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

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

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

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