Question

I have a really weird situation. The idea is there is a scroller that moves from left to right to display different groups. But when it stops to show specific group, there are links to leaf through different “pages” of the group. Now in order to do this, you click link one page fades and another fades in. Everything worked smooth until I apparently did something to agitate things and I’m not sure what it is. But the problem is I can fade in and out the first page of the group fine. But when I try to fade in and out the second or third, although the paragraph text DOES fade in and out, the image DOES NOT. And if you look at the switch statement, it appears that the image should behave the same as the text:

     $(".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;
  }
 });
   });

markup:

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

Thanks for any response.

Answer 1

It looks like your class names are missing, syntactically incorrect, or logically wrong.

• The images in group 1 have classes, but those in group 2 and group 3 do not.
• Class names can’t start with numbers. You have 1, 2 and 3 as classes.
• In every case, your selector starts with #group1. You never select the other groups. Is that your intent?