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