jqueryのカスタムスライダーが「ジャンプ」するのを避ける方法

Question

私はこのバナーで飛び続けています。私はそのサイジングを知っていますが、私はこれを反応的に保ちたいと思います。私はワードプレスでカスタムスライダを作成しました。 100％幅にする必要があります>ここにはフィドルへのリンクがあります。 https://jsfiddle.net/SCATORY/rntnht3j/2/

<section id="banners"> 
    <div class="banner bone"> 
     <a href="http://investors.gobio.com/news/" target="_blank"> 
      <img style="width:100%;" src="https://www.gobio.com/research/wp-content/uploads/sites/2/2016/05/VirtualScopics_BTR_banner.jpg"> 
     </a> 
    </div> 
    <div class="banner2 btwo"> 
     <img style="width:100%;" src="http://www.gobio.com/research/wp-content/uploads/sites/2/2016/05/EvriBeat_WebHomeSliderGraphic_R1.jpg"> 
    </div> 
</section> 

相続人はHTML

$(document).ready(function() { 
    function playslider() { 
     $(".banner").fadeIn(800).delay(3600).fadeOut(800); 
     $(".banner2").delay(5200).fadeIn(800).delay(3600).fadeOut(800, playslider); 
    } 
    playslider(); 
}); 

のjQuery

#banners { 
    width: 100%; 
    min-height: 215px; 
    overflow: hidden; 
    background-color: #340004; 
    display: block; 
} 
.banner { 
    width: 100%; 
    Height: 100%; 
    background-color: #340004; 
} 
.banner2 { 
    display: none; 
    width: 100%; 
    Height: 100%; 
    background-color: #520002; 
} 

と

Answer 1

がある遅延を発行するのではなく、次のスライドを呼び出すために、コールバック関数を使用してCSS以前のスライドアニメーションと遅延と同じです。

遅延を以前のアニメーション+遅延と同じに設定しても、イベントキューに蓄積されるわずかな遅延のために、以前のアニメーションの直後に実際に実行されることは保証されません。

コードにはいくつかの改善点がありますが、これが最も単純な解決策です。 $(".banner2")のように$(".banner")の​​の最後にコールバック関数を実行します。

function playslider() { 

    $(".banner").fadeIn(800).delay(3600).fadeOut(800, function() { 
     $(".banner2").fadeIn(800).delay(3600).fadeOut(800, playslider); 
    }); 

}