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);

Answer 2

实际上接受的解决方案不是CSS3解决方案（它仍然需要一些javascript代码）。请检查以下代码。

HTML：

<a id='buttonleft'>Button left</a>
<a id='buttonright'>Button right</a>

的CSS：

 #buttonleft, #buttonright {
    text-align: left;
    background: rgb(180,180,255);
    opacity:0.5;

    /* property duration timing-function delay */
    -webkit-transition: opacity 500ms linear 100ms;
    -moz-transition: opacity 500ms linear 100ms;
    -o-transition: opacity 500ms linear 100ms;
    transition: opacity 500ms linear 100ms;
    }

#buttonleft:hover, #buttonright:hover {
    opacity: 1.0;
}

Answer 3

这样的事情？

$('#button').hover(
    function() { 
        $(this).animate({opacity: 0}, 500); 
    },
    function() { 
        $(this).animate({opacity: 1}, 500);
    }
);

Answer 4

您可以使用CSS3 animations，因为它比您提出原始问题时更受支持。我创建了一个jsFiddle showing how to do this on hover。

CommonJS

使用CSS3淡出/淡出效果

4 个答案: