円滑なjQuery fadeInとfadeOut画像を作成する

Question

私は完璧に動作する画像フェードカルーセルモバイル版から使用しているのと全く同じスクリプトとCSSを実行しようとしています。しかし、あなたがスニペットから見ることができるデスクトップ上には、私が見ることができるものからフェードアウトはありません。それはちょうど点滅し、背景色を表示し、次の画像を薄くします。私はこれを何の不具合もなく滑らかな消しゴムにするのを助けたいと思います。

$.fn.slider = function() { 
 
    var $this = this; 
 
    var $controls = $this.nextAll('.controls').first(); 
 
    var index; 
 

 
    $this.find('li:gt(0)').hide(); 
 
    setInterval(function() { 
 
     $this.find('li:first-child').fadeOut(3000) 
 
      .next('li').fadeIn(3000) 
 
      .end().appendTo($this); 
 
     var index = $this.find('li:first-child').data('index'); 
 
     $controls.find('li.active').removeClass('active'); 
 
     $controls.find('li').eq(index).addClass('active'); 
 
     }, 
 
     4000); 
 
    }; 
 

 

 
    $('#slider2').slider();

#slider2 { 
 
    position: absolute; 
 
    background-color: #5A6D77; 
 
    padding: 0; 
 
    margin: 0; 
 
    z-index: -1; 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
} 
 

 
#slider2 img { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    z-index: -1; 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
} 
 
.images-list>li { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-size: cover; 
 
    -webkit-transition: 0s; 
 
    -moz-transition: 0s; 
 
    -ms-transition: 0s; 
 
    -o-transition: 0s; 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    margin: 0; 
 
} 
 
ul { 
 
    list-style: none; 
 
    position: absolute; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.images-list { 
 
    position: absolute; 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="slider2" class="images-list"> 
 
      <li data-index="0"><img src="https://images.unsplash.com/photo-1489900464632-5f5907edda24?auto=format&fit=crop&w=1950&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"</li> 
 
      <li data-index="1"><img src="https://images.unsplash.com/photo-1500440853933-3796d0182c96?auto=format&fit=crop&w=1267&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"</li> 
 
      <li data-index="2"><img src="https://images.unsplash.com/photo-1508233620467-f79f1e317a05?auto=format&fit=crop&w=1268&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"</li> 
 
      <li data-index="3"><img src="https://images.unsplash.com/photo-1509650926597-25eead3b6ca9?auto=format&fit=crop&w=1350&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"</li> 
 
      </ul>

Answer 1

アニメーション背面各遷移上の背景ポップ理由はLIタグが次々に配置されることで、それらがposition:absoluteセットを互いの上に一つであることが必要LIに

background-size：coverはbackground-image CSSスタイルにのみ適用され、LIタグ内のIMGタグには適用されません。

背景画像を使用するようにHTMLを修正しました。スケーリングがうまく機能します。

Javascriptに変更はありません。

$.fn.slider = function() { 
 
    var $this = this; 
 
    var $controls = $this.nextAll('.controls').first(); 
 
    var index; 
 

 
    $this.find('li:gt(0)').hide(); 
 
    setInterval(function() { 
 
     $this.find('li:first-child').fadeOut(3000) 
 
      .next('li').fadeIn(3000) 
 
      .end().appendTo($this); 
 
     var index = $this.find('li:first-child').data('index'); 
 
     $controls.find('li.active').removeClass('active'); 
 
     $controls.find('li').eq(index).addClass('active'); 
 
     }, 
 
     4000); 
 
    }; 
 

 

 
    $('#slider2').slider();

#slider2 { 
 
    position: absolute; 
 
    background-color: #5A6D77; 
 
    padding: 0; 
 
    margin: 0; 
 
    z-index: -1; 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
} 
 

 
.images-list>li { 
 
    position: absolute; 
 
    top:0; 
 
    right:0; 
 
    left:0; 
 
    bottom:0; 
 
    background-size: cover; 
 
    -webkit-transition: 0s; 
 
    -moz-transition: 0s; 
 
    -ms-transition: 0s; 
 
    -o-transition: 0s; 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    margin: 0; 
 
} 
 
ul { 
 
    list-style: none; 
 
    position: absolute; 
 
    top:0; 
 
    right:0; 
 
    left:0; 
 
    bottom:0; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="slider2" class="images-list"> 
 
     <li data-index="0" style="background-image: url(https://images.unsplash.com/photo-1489900464632-5f5907edda24?auto=format&fit=crop&w=1950&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D)"</li> 
 
     <li data-index="1" style="background-image: url(https://images.unsplash.com/photo-1500440853933-3796d0182c96?auto=format&fit=crop&w=1267&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D)"></li> 
 
     <li data-index="2" style="background-image: url(https://images.unsplash.com/photo-1508233620467-f79f1e317a05?auto=format&fit=crop&w=1268&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D)"></li> 
 
     <li data-index="3" style="background-image: url(https://images.unsplash.com/photo-1509650926597-25eead3b6ca9?auto=format&fit=crop&w=1350&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D)"></li> 
 
     </ul>