CODEWITHSUNDEEP
javascriptjqueryhtmlcss
johnboy13
johnboy13

Reputation: 73

Image Slideshow not fading out then fading in?

I am trying to make a image slideshow that chooses a random image, fades out the current image, and fades in the randomly selected image. If that makes sense. If not, the code might explain what I'm trying to do:

function cycleImages(){
  var images = [
      "gallery-1.jpg",
      "gallery-2.jpg",
      "gallery-3.jpg"

  ];
  var randomImg = images[Math.floor(Math.random()*images.length)]
  $("#switch").attr("src",randomImg).fadeOut(4000).stop(true,true).hide().fadeIn(4000)
}

$(document).ready(function(){
    setInterval('cycleImages()', 7000);
})

This is my first time using Jquery. I want it to fade out before it selects a randomly selected image, but it simply disappears with a hard transition and fades in the next image. Please help me out, thank you!

Upvotes: 1

Views: 53

Answers (1)

rupindr
rupindr

Reputation: 614

fadeOut takes a second parameter. A callback function when fading out is complete. Something like this:

$("#switch").attr("src",randomImg).fadeOut(4000, () => {
    //this will run after fading out.
    $("#switch").fadeIn(4000);
});

fiddle: https://jsfiddle.net/17w3edgv/1/

Upvotes: 1

Related Questions