jqueryイメージスワップ機能でキューが壊れています

Question

イメージが変化するジャンボトロンがあるサイトを構築しています。私はインターネットで回答を見ようとしましたが、何も見つかりませんでした。また、答えは簡単だと分かっていますが、今は見ることができません。

問題は、最初のイメージスワップがうまくいって、最初のイメージがフェードアウトし、2番目のイメージがフェードインすることです。次のイメージスワップはすべて次のようになります。現在のイメージはフェードアウトしますが、2番目のイメージは同時にフェードインします。つまり、一度に2つのイメージが表示され、その下のページ全体がプッシュダウンされます。

$(document).ready(function(){ 
 

 
\t window.setInterval(sliduh1, 3000); 
 

 
\t var slide = $('.activeSlide'); 
 

 
}); 
 

 
function sliduh1() { 
 
\t \t var currentSlide = $('.activeSlide'); 
 
\t \t var nextSlide = currentSlide.next(); 
 

 
\t \t if (nextSlide.length === 0) { 
 
\t \t \t nextSlide = $('.slide').first(); 
 
\t \t } 
 

 
\t \t currentSlide.fadeOut(600).removeClass('activeSlide'); 
 
\t \t nextSlide.fadeIn(600).addClass('activeSlide'); 
 
}

.slider1 img { 
 
\t position: relative; 
 
\t display: block; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
\t width: 650px; 
 
} 
 
.slide { 
 
\t display: none; 
 
} 
 
.activeSlide { 
 
display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="slider1"> 
 
\t <div class="slide activeSlide"> 
 
\t \t <img src="imgs/mobile1.png"> 
 
\t </div> 
 
\t <div class="slide"> 
 
\t \t <img src="imgs/blueprints1.jpg"> 
 
\t </div> 
 
\t <div class="slide"> 
 
\t \t <img src="imgs/tools1.png"> 
 
\t </div> 
 
\t <div class="slide"> 
 
\t \t <img src="imgs/sourceCode1.png"> 
 
\t </div> 
 
\t <div class="slide"> 
 
\t \t <img src="imgs/vr1.jpg"> 
 
\t </div> 
 
\t <div class="slide"> 
 
\t \t <img src="imgs/market1.png"> 
 
\t </div> 
 
</div>

Answer 1

A.ウォルフはコメントでの質問に答えました。答えは

 currentSlide.fadeOut(600, function(){ 
      $(this).removeClass('activeSlide'); 
      nextSlide.fadeIn(600).addClass('activeSlide'); 
     }); 

代わりの

 currentSlide.fadeOut(600).removeClass('activeSlide'); 
    nextSlide.fadeIn(600).addClass('activeSlide'); 

Answer 2

HTMLと非常に良好ではないイムが、あなたは固定する位置を設定した場合、それは動作wouldntの？それ以外の場合は、フェードアウト処理に別のクラス（ex fadeOutSlide）を追加することもできます。または、1つの画像がフェードインし、1つがフェードアウトする代わりに、別の画像にフェードするように設定します。

Answer 3

あなたはこれを試していますか？

function sliduh1() { 
     var currentSlide = $('.activeSlide'); 
     var nextSlide = currentSlide.next(); 

     if (nextSlide.length === 0) { 
     nextSlide = $('.slide').first(); 
     } 

     currentSlide.fadeOut(0).removeClass('activeSlide'); 
     nextSlide.fadeIn(600).addClass('activeSlide'); 
    } 

    window.setInterval(function(){ 
     sliduh1() ; 
    }, 5000); 

fiddle link