Как исчезать при нажатии с помощью следующего кода?

Я пытаюсь, чтобы мой текущий код постепенно появлялся при каждом переходе изображения. Я не уверен, как интегрировать fadeIn в свой код, потому что, когда я это сделал, он затем показал бы изображения, когда мне нужно было показывать только одно изображение за раз.

HTML:

 <div>
  <img src = "https://fyf.tac-cdn.net/images/products/large/BF116-11KM.jpg" class = "is-selected" />
  <img src = "https://fyf.tac-cdn.net/images/products/large/BF89-11K.jpg" />
  <img src = "https://cdn.atwilltech.com/flowerdatabase/s/sweetly-scented-bouquet-of-flowers-VA02810.425.jpg" />
</div>

CSS:

img {
  display: none;
}

.is-selected {
  display: inline;
}

Javascript:

$("img").click(function() {
  $(this).removeClass();
  if ($(this).is(":last-child")) {
    $(":first-child").addClass("is-selected");
  } else {
    $(this).next().addClass("is-selected");
  }
});

Вот он на скрипке: https://jsfiddle.net/cmrfdb2a/20/

Я в основном пытаюсь сделать слайд-шоу с изображениями, которые постепенно исчезают при переходе. Если бы кто-нибудь мог вести меня в правильном направлении, это было бы действительно полезно!