image - Onclick 将 img 动画到 img 上并淡出

Question

我有一个带有背景图像的 div。我想要一个 div 的 onclick 函数，一个相同宽度和高度的图像淡入原始 div 并再次淡出。

Websearch 为我提供了带有按钮的解决方案，我真的很想要一个没有保持可见按钮的解决方案。

我在单击淡入淡出部分并将新图像放在旧图像之上时遇到问题。我知道 img-swap 但我想要一个动画。

有人能指出我正确的方向吗？

谢谢。

Answer 1

可能有很多方法可以做到这一点……这里有一种使用伪元素和 JQuery（用于单击事件）的方法。

Codepen 演示

HTML

<div class="clicker"> </div> /* note no content - not always appropriate */

CSS

.clicker {
  width:250px;
  height:250px;
  margin:10px;
  border: 1px solid lightgrey;
  background:url(http://lorempixel.com/output/city-q-c-250-250-6.jpg);
  /* default bg image */
  position:relative;

}

.active:after {
  position:absolute;
  content:"";
  top:0;
  left:0;
  height:100%;
  width:100%;
  background:url(http://lorempixel.com/output/people-q-c-250-250-5.jpg);
  /* bg image of pseudo element */
  animation: fade 1s; /* call the animation */

}

 /* define the animation */     

@-webkit-keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

jQuery

(function($) {
  $('.clicker').click(function(){
    $(this).toggleClass('active');
  });
})(jQuery);

我能用有限的 JQ 技能做最好的事情，但要根据你提出的要求。内联图像会极大地简化事情