J'ai une situation vraiment bizarre. L'idée est qu'il y a un scroller qui se déplace de gauche à droite pour afficher différents groupes. Mais quand il s'arrête pour montrer un groupe spécifique, il y a des liens pour feuilleter différentes "pages" du groupe. Maintenant, pour ce faire, vous cliquez sur le lien une page s'estompe et une autre se fane. Tout a bien fonctionné jusqu'à ce que j'ai apparemment fait quelque chose pour agiter les choses et je ne suis pas sûr de ce que c'est. Mais le problème est que je peux fondre dans la première page du groupe. Mais quand j'essaye de faire des fondus avant et arrière le deuxième ou le troisième, bien que le texte du paragraphe FAIT un fondu avant et arrière, l'image NE FAIT PAS. Et si vous regardez l'instruction switch, il semble que l'image doit se comporter comme le texte:JavaScript Switch Statement aplatit l'opacité à aucun mais ne l'estompe pas Retour
$(".slidernav a").click(function(){
// var original = $(".slidernav a:first");
var current = $(this).attr("href");
switch(current) {
case "#first":
$("#group1 img").animate({
opacity: 0
}, 500);
$("#group1 p").animate({
opacity: 0
}, 500);
$("#group1 .1").animate({
opacity: 1
}, 500);
$("#group1 p.first").animate({
opacity: 1
}, 500);
break;
case "#second":
$("#group1 img").animate({
opacity: 0
}, 500);
$("#group1 p").animate({
opacity: 0
}, 500);
$("#group1 .2").animate({
opacity: 1
}, 500);
$("#group1 p.second").animate({
opacity: 1
}, 500);
break;
case "#third":
$("#group1 img").animate({
opacity: 0
}, 500);
$("#group1 p").animate({
opacity: 0
}, 500);
$("#group1 .3").animate({
opacity: 1
}, 500);
$("#group1 p.third").animate({
opacity: 1
}, 500);
break;
}
});
});
balisage:
<div class="main_view">
<div class="window">
<div class="image_reel">
<div id="group1">
<a href="#"><img src="images/reel_1.png" class="1" /></a>
<a href="#"><img src="images/reel_1b.png" class="2" /></a>
<a href="#"><img src="images/reel_1c.png" class="3" /></a>
<p class="first"> Claim A</p>
<p class="second"> Claim B</p>
<p class="third"> Claim C</p>
<div class="slidernav">
<a href="#first"> Claim A</a>
<a href="#second"> Claim B</a>
<a href="#third"> Claim C</a>
</div>
</div>
<div id="group2">
<a href="#"><img src="images/reel_2.png" /></a>
<a href="#"><img src="images/reel_2b.png" /></a>
<a href="#"><img src="images/reel_2c.png" /></a>
<p class="first"> Claim A</p>
<p class="second"> Claim B</p>
<p class="third"> Claim C</p>
<div class="slidernav">
<a href="#first"> Claim A</a>
<a href="#second"> Claim B</a>
<a href="#third"> Claim C</a>
</div>
</div>
<div id="group3">
<a href="#"><img src="images/reel_3.png" alt="" /></a>
<a href="#" id="sixth"><img src="images/reel_1b.png" /></a>
<a href="#" id="seventh"><img src="images/reel_1b.png" /></a>
</div>
<div id="group4">
<a href="#"><img src="images/reel_4.png" alt="" /></a>
<a href="#" id="eigth"><img src="images/reel_1b.png" /></a>
<a href="#" id="ninth"><img src="images/reel_1b.png" /></a>
</div>
</div>
</div>
<div class="paging">
<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
</div>
css:
.window {
margin-top: 20px;
height:286px; width: 655px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
/* THIS IS WHAT MAKES IT WORK - THE TEXT MUST BE SITTING NEXT TO OTHER TEXT */
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel div {position: relative; width: 655px; float: left;}
.image_reel img.1 {position: absolute; top: 0; left: 0; z-index: 3;}
.image_reel img.2 {position: absolute; top: 0; left: 0; z-index: 2;}
.image_reel img.3 {position: absolute; top: 0; left: 0; z-index: 1;}
.image_reel p.first {position: absolute; top: 0; left: 0; z-index: 3;}
.image_reel p.second {position: absolute; top: 0; left: 0; z-index: 2;}
.image_reel p.third {position: absolute; top: 0; left: 0; z-index: 1;}
.image_reel div.slidernav {position: absolute; top: 200px; left: 0px; z-index: 4;}
.image_reel div.slidernav a {display: block; color: #fff;}
Merci pour tout réponse.
Vos classes CSS ne peuvent pas commencer par un numéro, FYI. –