Оператор переключения JavaScript уменьшает прозрачность, но не возвращает ее обратно - PullRequest
Новая
       20

Оператор переключения JavaScript уменьшает прозрачность, но не возвращает ее обратно

0 голосов
/ 09 августа 2010

У меня действительно странная ситуация.Идея в том, что есть скроллер, который перемещается слева направо для отображения разных групп.Но когда он перестает показывать конкретную группу, появляются ссылки для пролистывания разных «страниц» группы.Теперь, чтобы сделать это, вы нажимаете на ссылку, одна страница исчезает, а другая исчезает. Все работало гладко, пока я, очевидно, не сделал что-то для возбуждения, и я не уверен, что это такое.Но проблема в том, что я могу постепенно увеличивать и уменьшать яркость первой страницы группы.Но когда я пытаюсь постепенно увеличивать или уменьшать значение второго или третьего, хотя текст абзаца исчезает и исчезает, изображение не появляется.И если вы посмотрите на оператор 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;}

Спасибо за любой ответ.

1 Ответ

0 голосов
/ 09 августа 2010

Похоже, что имена ваших классов отсутствуют, синтаксически неверны или логически неверны.

  • Изображения в группе 1 имеют классы, а изображения в группе 2 и группе 3 - нет.
  • Имена классов не могут начинаться с цифр.У вас есть 1, 2 и 3 в качестве классов.
  • В каждом case ваш селектор начинается с #group1.Вы никогда не выбираете другие группы.Это твое намерение?
...