jqueryシンプルスライダーの意味がありません

Question

javascriptで新しいと私はこのスライダーを動作させることができますが、私は後に何を正確には何が間違っている？

スライダーは基本的にフェードインとフェードインされていて、鉱山ではまるで笑っているだけです。

ここでは、次のようなHTMLがあるコード

$(function() { 
    setInterval("rotateDiv()", 5000); 
}); 

    function rotateDiv() { 
    var currentDiv=$("#simlpeslider div.current"); 
    var nextDiv= currentDiv.next(); 
    if (nextDiv.length ==0) 
     nextDiv=$("#simlpeslider div:first"); 

    currentDiv.removeClass('current').addClass('previous'); 
    nextDiv.addClass('current').fadeIn('3000',function() { 
     currentDiv.removeClass('previous').fadeOut('1000');}); 

} 

です：

<div id="simlpeslider"> 
         <!-- Slide 1 --> 
         <div class="current"> 
          <h6>Title 1</h6> 
          <p>Lorem ipsum dolor sit amet, consectetur elit. Maecenas non ipsum nunc, nec sagittis tellus. Lorem ipsum dolor sit amet, consectetur elit. Maecenas non ipsum nunc</p> 
         </div> 
         <!-- End Slide 1 --> 
         <!-- Slide 2 --> 
         <div> 
          <h6>iusdhfisd sdf</h6> 
          <p>Lorem ipsum dolor sit amet, consectetur elit. Maecenas non ipsum nunc, nec sagittis tellus. Lorem ipsum dolor sit amet, consectetur elit. Maecenas non ipsum nunc</p> 
         </div> 
         <!-- End Slide 2 --> 
         <!-- Slide 3 --> 
         <div> 
          <h6>eco sodalirity ltd</h6> 
          <p>Lorem ipsum dolor sit amet, consectetur elit. Maecenas non ipsum nunc, nec sagittis tellus. Lorem ipsum dolor sit amet, consectetur elit. Maecenas non ipsum nunc</p> 
         </div> 
         <!-- End Slide 3 --> 
         <!-- Slide 4 --> 
         <div> 
          <h6>asd</h6> 
          <p>Lorem ipsum dolor sit amet, consectetur elit. Maecenas non ipsum nunc, nec sagittis tellus. Lorem ipsum dolor sit amet, consectetur elit. Maecenas non ipsum nunc</p> 
         </div> 
         <!-- End Slide 4 --> 
         <!-- Slide 5 --> 
         <div> 
          <h6>ec234234234</h6> 
          <p>Lorem ipsum dolor sit amet, consectetur elit. Maecenas non ipsum nunc, nec sagittis tellus. Lorem ipsum dolor sit amet, consectetur elit. Maecenas non ipsum nunc</p> 
         </div> 
         <!-- End Slide 5 --> 
       </div> 

CSSは次のとおりです。

#simlpeslider{ 
    width:100%; 
    float:left; 
    height:150px; 
    overflow:hidden; 
} 

#simlpeslider div { 
    position:absolute; 
    display:none; 
    } 

#simlpeslider div.previous { 
    display:none; 
    } 
#simlpeslider div.current { 
    display:block; 
} 
#simlpeslider div.normal { 
    display:none; 
} 

おかげ

Answer 1

は単に、あなたがフェードアウトを呼び出す必要が（）を削除する前に！

currentDiv.removeClass('previous').fadeOut('1000'); 

それが表示されたID simpleslider（あなたのタイプミスに注意してください）のスタイルによって継承され、そのデフォルトスタイル取り戻しますように、これが最初の要素から「前」、あなたのクラスを削除します：なし。そのため、fadeOut（）は効果を持ちません。何をしたい

は次のとおりです。

currentDiv.fadeOut('1000', function() { 
    currentDiv.removeClass('previous'); 
}); 

同じことがフェードインのために行きます。最初にdisplay：blockを含むクラスを追加すると、要素はすぐに表示され、fadeInは何の効果もありません。