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

【问题标题】：Is there a way to animate alpha of rgba background without jquery.color?有没有办法在没有 jquery.color 的情况下为 rgba 背景的 alpha 设置动画？
【发布时间】：2011-10-08 07:55:37
【问题描述】：

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

【问题讨论】：

标签： jquery css jquery-animate alpha rgba

【解决方案1】：

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

这是一个有效的小提琴：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>

【讨论】：

它实际上可能会更短 - 但我为动画添加了跨浏览器支持

【解决方案2】：

var $obj = $('.selector');
$obj.css({volume: 50});
$obj.animate({volume: 90}, {
    duration: 200, // default 400
    step: function (n, t) {
        $(t.elem).css({background: 'rgba(255,255,255,'+n/100+')'});
    }
});

jquery animate

也许你还需要：

if (!$obj.is(':animated')) {
    $obj.animate(...);
}

【讨论】：

【解决方案3】：

唯一的方法是使用 css 不透明度。事实上 jQuery 的 animate() 也使用了它。

【讨论】：

不幸的是，这不会影响背景的不透明度
@Molecule, @PaulPRO：在这种情况下，我需要将不透明度更改为 1 而不是 0.9，对吧？
@PaulPRO，我不知道如何改变背景的不透明度。但是，它可能会通过丑陋的 hack 来完成，例如添加具有相同大小、所需背景并使用绝对定位和 zIndex 定位在目标块后面的额外 div。
@Ken，是的。别忘了，如果你想让它成为跨浏览器，你必须申请一些tricks

【解决方案4】：

例如像这样的东西？

http://jsfiddle.net/YZKKp/13/

【讨论】：