使用jquery实现无闪烁的图像淡入

Question

当我点击一个链接时，我正在尝试淡入图像，但这会让我在每次淡入淡出时都会“眨眼”。有没有办法避免这种眨眼，只有一个干净的fadeIn？

这是我当前的代码：

function changeMortar(mortar) {
     var html = '<img src="http://www.randerstegl.dk/fileadmin/fugefarver/GFXSharedMortars/fuge'+mortar+'.png" width="500" height="300">'                    
        $("#fuge-color").hide().html(html).fadeIn('slow');
    }​

我把这个例子做成了http://jsfiddle.net/BHCam/14/

它会淡入白色，然后进入我选择的砂浆中。我想要的是让我选择的迫击炮，在旧的迫击炮上褪色。

Answer 1

我对你的代码做了一些修改。在HTML中尝试这样做：

<div id="slideshow">
   <img src="http://www.randerstegl.dk/fileadmin/fugefarver/GFXSharedMortars/fugeGraa.png" alt="" class="active" width="500" height="300"/>
   <img src="http://www.randerstegl.dk/fileadmin/fugefarver/GFXSharedMortars/fugeAnthrazit.png" width="500" height="300" />

</div>
<a href="#" class="change-mortar-link" onclick="slideSwitch();">Change mortar</a>

在CSS中：

#slideshow {
   position:relative;
   height:350px;
}
#slideshow IMG {
  position:absolute;
  top:0;
  left:0;
  z-index:8;
}
#slideshow IMG.active {
   z-index:10;
}
#slideshow IMG.last-active {
   z-index:9;
}

和JavaScript代码：

function slideSwitch() {
   var $active = $('#slideshow IMG.active');

   if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

   var $next =  $active.next().length ? $active.next()
    : $('#slideshow IMG:first');

   $active.addClass('last-active');

   $next.css({opacity: 0.0})
      .addClass('active')
      .animate({opacity: 1.0}, 1000, function() {
          $active.removeClass('active last-active');
     });
  }

在here中，您可以找到更多信息。JsFiddle中的运行示例是here。

Answer 2

闪烁和其他类似的伪像可能是由您的浏览器或显卡驱动程序引起的，因此除了检查图形设置、调整或升级机器组件之外，您没有什么可做的。在这里，您的示例可以很好地淡出。

Answer 3

只需将其更改为

 $("#fuge-color").hide().fadeIn('slow'); //use slow,fast,1000,2000,3000

选择最好的结果