jQuery - 切换多个图像并保持 div 高度

Question

I am currently using an on click function to toggle between 2 images and it is working like a charm but I was wondering how I would add more images to the sequence? The second part of my question is, is it possible to maintain the height of the div when toggling between the images as it currently collapses the height to (display: none) during the transition.

$('#image').on('click', function() {
  let src = ($(this).attr('src') === 'image/1.jpg')
    ? 'image/1.jpg'
    : 'image/2.jpg';

  $(this)
    .fadeOut(500, () => $(this).attr('src', src))
    .fadeIn(500);
});

Thank you all for your help!

JSFiddle - https://jsfiddle.net/camusahn/u4rspwya/

Answer 1

you can store your images in an array then pick randomly on click. Just take a look on what I have done though in my codepen:

https://codepen.io/jcarizon/pen/MWWLyOP

$('#image').on('click', function() {
  const images = [
    "https://dummyimage.com/100x100/fff000/ffffff",
    "https://dummyimage.com/100x100/ff0000/ffffff",
    "https://dummyimage.com/100x100/0f0f11/ffffff"
  ];
  const randomImages = images[Math.floor(Math.random() * images.length)];

  let src = randomImages;

  $(this)
    .fadeOut(500, () => $(this).attr('src', src))
    .fadeIn(500);
});

<img id="image" src="https://dummyimage.com/100x100/000000/ffffff" alt="dummy" />