衰落的图像，与目前基本JQuery的图片库我已经使用

Question

$(document).ready(function() { 
 
    // swaps the images on hover 
 
    $("#imgGallery li img").hover(function(){ 
 
     $('#main').attr('src',$(this).attr('src').replace('thumbnail/', '')); 
 
    }); 
 
    // Image pre-load 
 
    var imgSwap = []; 
 
    $("#imgGallery li img").each(function(){ 
 
     imgUrl = this.src.replace('thumbnail/', ''); 
 
     imgSwap.push(imgUrl); 
 
    }); 
 
    $(imgSwap).preload(); 
 
}); 
 
$.fn.preload = function() { 
 
    this.each(function(){ 
 
     $('<img/>')[0].src = this; 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="imgGallery"> 
 
    <img src="gallery/img1.jpg" alt="" id="main" /> 
 
    <ul> 
 
\t <li><img src="gallery/thumbnail/img1.jpg" alt="" /></li> 
 
     <li><img src="gallery/thumbnail/img2.jpg" alt="" /></li> 
 
\t <li><img src="gallery/thumbnail/img3.jpg" alt="" /></li> 
 
\t <li><img src="gallery/thumbnail/img4.jpg" alt="" /></li> 
 
\t <li><img src="gallery/thumbnail/img5.jpg" alt="" /></li> 
 
\t <li><img src="gallery/thumbnail/img6.jpg" alt="" /></li> 
 
\t <li><img src="gallery/thumbnail/img7.jpg" alt="" /></li> 
 
    </ul> 
 
</div>

以上是我用来做一个很基本的缩略图库的代码，你可以有一个快速的外观和告诉我如何淡入图像。

Answer 1

那么，jQuery有.fadeIn()和.fadeOut()。

但它看起来像你想从一个图像淡出到另一个，这是一种不同类型的衰落，称为“淡入淡出”。在淡入淡出的情况下，一个图像淡出和其他变淡在

结帐这个链接，一个jQuery淡入淡出实现： http://www.simonbattersby.com/blog/simple-jquery-image-crossfade/