在jQuery中使用fadein更改img src

Question

我有这段代码会使图像褪色

$("#mix").click(function() {
   $("#mix").addClass("load");
      $("#brick-image").stop(true).fadeTo("slow", 0);
      $("#brick-image").load(function() {                                
         $("#mix").removeClass("load");
         $("#brick-image").stop(true).fadeTo("slow", 1);
      });
      $("#brick-image").attr("src","build.php?bricks=RT433,RT201,RT543&ratio=40,40,20&"+new Date().getTime());
});

的HTML

<div id="bricks">
   <img src="build.php" id="brick-image">
</div>

<div id="mix-button">
   <a href="#" id="mix" class="load">Bland igen</a>
</div>

这样做的问题是图像逐渐淡出，然后新图像逐渐淡入。是否有可能以某种方式使新图像逐渐淡入另一个图像，然后隐藏旧图像，这样我将获得非常平滑的淡出效果而无需首先淡出背景（闪烁）？

img标签中的build.php是创建动态随机图像的函数。

Answer 1

您在那里只有一个图片标签，因此，您不能进行平滑过渡。 您需要制作两个不同的图像，一个图像淡出，而另一个图像以相同的速度淡入。 像这样：

HTML：

    <div id="bricks">
       <img src="build.php" class="brick-image active">
       <img src="build.php" class="brick-image">
    </div>

    <div id="mix-button">
       <a href="#" id="mix" class="load">Bland igen</a>
    </div>

CSS：

#bricks {
    position: relative;
}

.brick-image {
    position: absolute;
    display: none;
}

.brick-image.active {
    display: block;
}

JS：

$('#mix').click(function() {
   var $mix = $(this),
       $imgs = $('.brick-image', '#bricks');
       $newImg = $imgs.not('.active');

   $mix.addClass('load');
   $newImg.attr('src', 'build.php?bricks=RT433,RT201,RT543&ratio=40,40,20&'+new Date().getTime());
   $imgs.stop(true).toggleClass('active').fadeToggle('slow', function() {
       $mix.removeClass('load')
   });
});

Answer 2

您可以通过使用position:absolute并在fadeIn和fadeOut时更改z-index来使用css类。

Answer 3

jsBin演示

$("#mix").click(function(e){
      e.preventDefault();
      $("#mix").addClass("load");
      $('<img />').attr('src',"build.php?bricks=RT433,RT201,RT543&ratio=40,40,20&"+new Date().getTime()).load(function(){
         $("#mix").removeClass("load");
        $(this).hide().fadeTo(800,1).css({position:'absolute',top:0,left:0});
      }).appendTo('#bricks');
});