jquery - fadinを使って効果のある画像ソースを変更する方法

Question

$('#main').attr("src", src).load(function() {
  $('#main').fadeIn(2000);              

});

画像を別の画像に変更したいが、最初にフェードアウトしてからフェードインしたくない。最初の画像を消してから別の画像を表示したくありません。最初の画像が存在する間に画像を変更する必要があります。

Answer 1

1つの画像でそれを行う方法はわかりますが、別のimgタグを作成すると、それを行うことができます.

次の基本的な html が必要です。

<div id="cycler">
    <img class="active" src="image1.jpg" alt="My image" />
    <img src="image2.jpg" alt="My image" />     
</div>

必要な css は次のとおりです。z-index と配置を表示するだけです。必要に応じて、position にさらに追加する必要があります。レイアウトによっては、画像に合わせて #cycler で高さと幅を設定する必要がある場合もあります。

#cycler{position:relative;}
#cycler img{position:absolute;z-index:1}
#cycler img.active{z-index:3}

そして、ここにJavaScriptがあります：

function cycleImages(){
  var $active = $('#cycler .active');
  var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first');
  $next.css('z-index',2);//move the next image up the pile
  $active.fadeOut(1500,function(){//fade out the top image
  $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
      $next.css('z-index',3).addClass('active');//make the next image the top one
  });
}