Jquery animate Left et Right

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

Jquery animate Left et Right

jQuery

Discussions similaires

Partager

Partager