I want to change an image automatically after 2000ms. The image should fade in.

My HTML:

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

My 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);

With this code the images changes but it does not fade in. How can I force the images to fade in (and even fade out)?

I want to change an image automatically after 2000ms. The image should fade in.

My HTML:

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

My 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);

With this code the images changes but it does not fade in. How can I force the images to fade in (and even fade out)?

• javascript
• jquery

• 1 .attr will set the attribute for all the matched elements...$('.nile-slider img') should return invisible elements to get the fadeIn effect.. – Rayon Commented Mar 1, 2016 at 10:39

2 Answers 2

You can bine fadeOut and fadeIn() using fadeOut callback function, to achieve this.

// 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);

Providing the new source as callback of fadeOut may do the trick:

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