JQuery：如何在淡入淡出后更改图像？

Question

我想在2000ms后自动更改图像。图像应淡入

我的HTML：

<div class="nile-slider large-12 column"> 
    <img alt="landing page 3" src="assets/Startseite/Slider/Slider_2.jpg"> 
</div> 

我的JS：

// change header image after 2 seconds 
var images = ['Slider_1.jpg','Slider_2.jpg','Slider_3.jpg', 'Slider_4.jpg'], 
    index = 0, // starting index 
    maxImages = images.length - 1; 
var timer = setInterval(function() { 
    var currentImage = images[index]; 
    index = (index == maxImages) ? 0 : ++index; 
    $('.nile-slider img').attr('src','assets/Startseite/Slider/'+currentImage).fadeIn('slow'); 
}, 2000); 

这段代码的图像的变化，但它不褪色的我怎么能强迫图像淡入（甚至淡出）？

Answer 1

您可以结合fadeOut和fadeIn()使用fadeOut回调函数来实现这一点。

// change header image after 2 seconds 
var images = ['Slider_1.jpg','Slider_2.jpg','Slider_3.jpg', 'Slider_4.jpg'], 
    index = 0, // starting index 
    maxImages = images.length - 1; 
var timer = setInterval(function() { 
    var currentImage = images[index]; 
    index = (index == maxImages) ? 0 : ++index; 
    $('.nile-slider img').fadeOut(200, function() { 
     $('.nile-slider img').attr("src", 'assets/Startseite/Slider/'+currentImage); 
     $('.nile-slider img').fadeIn(200); 
    }); 
}, 2000); 

Answer 2

提供了新的来源为fadeOut回调可以做的伎俩：

$('.nile-slider img') 
    .fadeOut('fast', 
      function() { 
       $('.nile-slider img') 
       .attr('src','assets/Startseite/Slider/'+currentImage) 
       .fadeIn('slow'); 
      } 
);