1つのdivを消し、もう1つを消してください。

Question

3つのdivと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>