jquery - 有没有办法在没有 jquery.color 的情况下为 rgba 背景的 alpha 设置动画？

Question

我需要使用 jQuery 的 animate() 从 rgba(255,255,255,0.5) 到 rgba(255,255,255,0.9) 的动画背景，而不使用 jquery.color 插件和更改 CSS不透明度。 背景颜色始终相同(白色)，我只需要为 rgba 的 alpha 设置动画。 有什么建议吗？

Answer 1

您可以使用带有所需动画的预制 CSS 类，然后使用 jQuery 来打开/关闭该类。

这是一个工作 fiddle :https://jsfiddle.net/syoels/moL1q6ea/

$('#button1').click(function() {
  $('.square').removeClass('fadeMeIn').addClass('fadeMeOut');
});

$('#button2').click(function() {
  $('.square').removeClass('fadeMeOut').addClass('fadeMeIn');
});

.square {
  height: 50px;
  width: 50px;
  margin: 10px;
  background-color: rgba(255, 0, 0, 0.8);
}
.fadeMeOut {
  -webkit-animation: faeOutRGBA 1s linear;
  -moz-animation: faeOutRGBA 1s linear;
  -o-animation: faeOutRGBA 1s linear;
  animation: faeOutRGBA 1s linear;
  background-color: rgba(255, 0, 0, 0);
}
.fadeMeIn {
  -webkit-animation: faeInRGBA 1s linear;
  -moz-animation: faeInRGBA 1s linear;
  -o-animation: faeInRGBA 1s linear;
  animation: faeInRGBA 1s linear;
  background-color: rgba(255, 0, 0, 0.8);
}
@-webkit-keyframes faeOutRGBA {
  0% {
    background-color: rgba(255, 0, 0, 0.8)
  }
  100% {
    background-color: rgba(255, 0, 0, 0);
  }
}
@-moz-keyframes faeOutRGBA {
  0% {
    background-color: rgba(255, 0, 0, 0.8);
  }
  100% {
    background-color: rgba(255, 0, 0, 0);
  }
}
@-o-keyframes faeOutRGBA {
  0% {
    background-color: rgba(255, 0, 0, 0.8);
  }
  100% {
    background-color: rgba(255, 0, 0, 0);
  }
}
@keyframes faeOutRGBA {
  0% {
    background-color: rgba(255, 0, 0, 0.8);
  }
  100% {
    background-color: rgba(255, 0, 0, 0);
  }
  ;
}
@-webkit-keyframes faeInRGBA {
  0% {
    background-color: rgba(255, 0, 0, 0)
  }
  100% {
    background-color: rgba(255, 0, 0, 0.8);
  }
}
@-moz-keyframes faeInRGBA {
  0% {
    background-color: rgba(255, 0, 0, 0);
  }
  100% {
    background-color: rgba(255, 0, 0, 0.8);
  }
}
@-o-keyframes faeInRGBA {
  0% {
    background-color: rgba(255, 0, 0, 0);
  }
  100% {
    background-color: rgba(255, 0, 0, 0.8);
  }
}
@keyframes faeInRGBA {
  0% {
    background-color: rgba(255, 0, 0, 0);
  }
  100% {
    background-color: rgba(255, 0, 0, 0.8);
  }
  ;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square"></div>
<button id="button1">fade out</button>
<button id="button2">fade in</button>