褪色一格出另一個，在它的地方

Question

有3 div s和3個鏈接。

一次只能顯示一個div。當用戶點擊其中一個div的鏈接時，當前的一個應該淡出，所選的一個應該淡入，而不是先前的div。

這裏是目前的代碼：

的Javascript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     switches = $('#switches > li'); 
     slides = $('#slides > div'); 
     switches.each(function(idx) { 
       $(this).data('slide', slides.eq(idx)); 
      }).click(
      function() { 
       switches.removeClass('active'); 
       slides.removeClass('active').fadeOut('slow'); 
       $(this).addClass('active'); 
       $(this).data('slide').addClass('active').fadeIn('slow'); 
      }); 
    }); 
</script> 

CSS

<style style="text/css"> 
     ul { 
      list-style: none; 
     } 
     li:hover { 
      text-decoration: underline; 
     } 

     #switches .active { 
      font-weight: bold; 
     } 

     #slides div { 
      display: none; 
     } 

     #slides div.active { 
      display: block; 
     } 

     .outer { 
      position: absolute; 
     } 
     .outer div { 
      width: 600px; 
      height: 300px; 
     } 
     #uno { 
      background-color: red; 
     } 
     #dos { 
      background-color: blue; 
     } 
     #tres { 
      background-color: green; 
     } 
    </style> 

HTML

<ul id="switches"> 
     <li class="active">First slide</li> 
     <li>Second slide</li> 
     <li>Third slide</li> 
    </ul> 

    <div class="outer" id="slides"> 
     <div class="active" id="uno"> 
      First div. 
     </div> 
     <div id="dos"> 
      Second div. 
     </div> 
     <div id="tres"> 
      Third div. 
     </div> 
    </div> 

您可以查看這裏的頁面： http://dl.dropbox.com/u/6920023/proofOfConcept.html

我試圖使用標準的jQuery做到這一點，但顯然有什麼不對我的JavaScript代碼。

你能發現什麼是錯的，以及如何解決它？

Answer 1

您的CSS定義了一個不活動的隱藏的div。所以一旦你刪除了active類，它就會立即隱藏起來。

因此，刪除此條目：

#slides div { 
     display: none; 
    } 

並添加像這樣的頁面加載：

$(function() { 
    $('#slides div:not([class="active"])').hide(); 
}); // will hide inactive slides initially but not always 

Answer 2

的問題是，你使用slides.removeClass('active').fadeOut('slow');。所以首先它將刪除活動類，這意味着（根據您的CSS）它將是一個普通的div，因此與屬性display: none;。

所以你的div是自動隱藏的。只有在這之後，你纔會這樣做你的fadeOut('slow')，在一個隱藏的div上。

更好的將是這樣做：

$('div.active').fadeOut(1000).delay(1000).removeClass('active'); 
$(this).delay(2000).fadeIn(1000).delay(1000).addClass('active'); 

Answer 3

這工作，如果我理解正確的問題。

問題是，您無法淡入熱隱藏或未隱藏的元素。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      switches = $('#switches > li'); 
      slides = $('#slides > div'); 
      switches.each(function(idx) { 
        $(this).data('slide', slides.eq(idx)); 
       }).click(
       function() { 
        switches.removeClass('active'); 
        slides.removeClass('active').fadeOut('slow').hide(); 
        $(this).addClass('active'); 
        $(this).data('slide').addClass('active').fadeIn('slow'); 
       }); 
     }); 
    </script>