JavaScript - 使图像在点击时变白

Question

我有一堆图像，单击时我希望图像变成白色以模拟某种淡入淡出效果。因此，您单击它并持续 1 秒钟，它从原始图像淡化为白色。我还需要它在用户单击其他内容时返回原始图像。

这可以用 JavaScript 实现吗？ - 如果是这样，我应该看什么(我对图形真的很糟糕)。

我尝试过使用不透明度进行尝试，但我不希望背景在图像后面可见

Answer 1

伪元素解

您可以使用带有伪元素的包装器来覆盖您要查找的内容——动画由切换的 CSS 类处理(这对于性能来说是理想的)。

CodePen Demonstration

HTML

<div class="whiteclicker">
  <img src="http://lorempixel.com/400/200" alt=""/>
</div>

SCSS

@import "compass/css3/transition";

body { background: gainsboro; text-align: center; }

.whiteclicker {
  display: inline-block;
  position: relative;
  &::after {
    content: "";
    display: block;
    position: absolute;
    top:0; left:0; right:0; bottom:0;
    background: white;
    opacity: 0;
    @include transition(opacity 1s ease);
  }
  &.active::after {
    opacity: 1;
  }
}

JS

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