图像幻灯片不淡出然后淡出

Question

我正在尝试制作一个图像幻灯片，选择一个随机图像，淡出当前图像，然后在随机选择的图像中淡入。如果这有道理的话。如果没有，代码可能会解释我要做的事情：

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

这是我第一次使用Jquery。我希望它在选择随机选择的图像之前淡出，但它只是随着硬过渡而消失，并在下一张图像中淡出。请帮帮我，谢谢！

Answer 1

fadeOut需要第二个参数。淡出完成时的回调函数。类似这样的东西：

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

小提琴：https://jsfiddle.net/17w3edgv/1/