JQuery: Как изменить изображение после времени с помощью fadeIn?

Question

Я хочу изменить изображение автоматически после 2000 мс. Изображение должно исчезать в

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