Question

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

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

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

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

感谢。

Answer 1

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

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技能，但根据您的要求。内联图像可以极大地简化事情

Onclick动画img到img并淡出

1 个答案: