0

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

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

4

3 回答 3

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')
   });
});
于 2012-09-19T11:24:11.710 回答
0

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');
});
于 2012-09-19T11:31:06.420 回答
0

You can do it using css classes by using position:absolute and changing z-index while fadeIn and fadeOut.

于 2012-09-19T11:10:56.210 回答