Onclick 将 img 动画到 img 上并淡出答案

【问题标题】：Onclick animate img onto img and fade outOnclick 将 img 动画到 img 上并淡出
【发布时间】：2013-10-22 23:19:21
【问题描述】：

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

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

我在点击淡入淡出部分和在旧图像之上获取新图像时遇到了问题。我知道 img-swap 但我想要一个动画。

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

谢谢。

【问题讨论】：

请分享你已经准备好的代码。

标签： image css animation onclick

【解决方案1】：

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

Codepen Demo

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 技能做到最好，但要根据你的要求。内嵌图片会大大简化事情

【讨论】：