JavaScript Switch 语句将不透明度淡化为无，但不会将其淡化答案

【问题标题】：JavaScript Switch Statement Fades Opacity to None But Doesn't Fade it BackJavaScript Switch 语句将不透明度淡化为无，但不会将其淡化
【发布时间】：2011-03-27 02:21:00
【问题描述】：

我的情况很奇怪。这个想法是有一个从左到右移动以显示不同组的滚动条。但是当它停止显示特定组时，有链接可以浏览该组的不同“页面”。现在为了做到这一点，您单击链接一页淡入，另一页淡入。一切都很顺利，直到我显然做了一些事情来搅动事情，我不确定它是什么。但问题是我可以很好地淡入和淡出该组的第一页。但是当我尝试淡入和淡出第二个或第三个时，虽然段落文本会淡入和淡出，但图像不会。如果您查看 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>

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

感谢您的回复。

【问题讨论】：

您的 CSS 类不能以数字开头，仅供参考。

标签： javascript jquery opacity switch-statement fade

【解决方案1】：

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

第 1 组中的图像有类别，但第 2 组和第 3 组中的图像没有。
类名不能以数字开头。您有 1、2 和 3 作为类。
在每个case 中，您的选择器都以#group1 开头。您永远不会选择其他组。这是你的意图吗？

【讨论】：