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使用css类，并在z-index和fadeIn时更改fadeOut。

Answer 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');
});

在jquery中使用fadein更改img src

3 个答案:

jsBin demo