Question

我正在尝试让我的当前代码淡入每个过渡图像。我不确定如何在我的代码中集成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");
  }
});

这里是小提琴：http://fiddle.tinymce.com/Gegaab/5

我基本上是尝试制作幻灯片，其中图像在过渡时会逐渐消失。如果有人可以引导我朝正确的方向前进，那将真的很有帮助！

Answer 1

尝试以下CSS：

img {
   visibility: hidden;
   opacity: 0;
   position: absolute;
}

.is-selected {
   visibility: visible;
   transition: all 2s ease-in-out;
   opacity: 1;
}

JSFiddle

如何使用以下代码淡化点击？

1 个答案: