JavaScript开关语句将不透明度淡入无，但不会将其淡入

我有一个非常奇怪的情况。这个想法是有一个从左向右移动的滚动条来显示不同的组。但当它停止显示特定的组时，在组的不同页面上都有指向leaf的链接。现在，为了做到这一点，你点击链接，一个页面淡入淡出，另一个页面淡入淡出。一切都很顺利，直到我显然做了一些事情来搅动事情，我不知道这是什么。但问题是我可以淡入淡出小组的第一页。但当我尝试在第二或第三段淡入淡出时，尽管段落文本确实淡入淡出，但图像却没有。如果查看switch语句，图像的行为应该与文本相同：

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

标记：

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

---

感谢您的回复。

您的类名似乎丢失、语法错误或逻辑错误

组1中的图像有类，但组2和组3中的图像没有。 类名不能以数字开头。您有1、2和3个as类。 在任何情况下，选择器都以group1开头。您从不选择其他组。这是你的意图吗？

---

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