javascript - 使用 CSS3 淡出/淡出效果

Question

我正在尝试使用 CSS3 动画创建淡出/淡入效果。这是我的 CSS:

#buttonright, #buttonleft{
-webkit-transition:opacity 0.5s linear;
-moz-transition:opacity 0.5s linear;
-o-transition:opacity 0.5s linear;
-ms-transition:opacity 0.5s linear; 
transition:opacity 0.5s linear;
}

还有 Javascript(我使用的是 jquery):

$('#buttonleft').css("opacity","0");
$('#buttonright').css("opacity","0");
$('#buttonleft').css("opacity","1");
$('#buttonright').css("opacity","1");

看起来浏览器认为将不透明度设置为 0 然后将其设置回 1 是愚蠢的。有人有可能的解决方案吗？

谢谢。

Answer 1

编辑:将 yaki 的回答视为纯 CSS3 解决方案。

您没有给浏览器足够的时间来完成转换。如果您将 setTimeout 添加到后面的语句，它应该可以工作。

像这样:

$('#buttonleft').css("opacity","0");
$('#buttonright').css("opacity","0");
setTimeout(function(){$('#buttonleft').css("opacity","1");}, 5000);
setTimeout(function(){$('#buttonright').css("opacity","1");}, 5000);