在 jquery 中用淡入淡出改变 img src答案

【问题标题】：change img src with fadein in jquery在 jquery 中用淡入淡出改变 img src
【发布时间】：2012-09-19 11:05:46
【问题描述】：

我有这段代码可以淡化图像

$("#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 是一个创建动态随机图像的函数。

【问题讨论】：

标签： jquery html image load fadein

【解决方案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')
   });
});

【讨论】：

这似乎按预期工作 :) 它确实在第一次单击时隐藏了图像，但在第二次单击时会隐藏，因此可能需要进行一些调整。非常感谢:)

【解决方案2】：

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

【讨论】：

【解决方案3】：

jsBin demo

$("#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');
});

【讨论】：