Question

<!DOCTYPE html> 
<html>
    <head>
        <style>
            .divs
            {
                width:900px;
                height:599px;
                border:solid 1px gray; 
                position:absolute;
                top:0px;
                left:0px;
            }
            #div_1
            {
                background:#fff url('../photos/home/Jun112010_5456.jpg') top left no-repeat;
            }
            #div_2
            {
                background:#fff url('../photos/home/_FRI2911.jpg') top left no-repeat;
            }
        </style>
    </head>
    <body>
        <div id="div_2" class="divs"></div>
        <div id="div_1" class="divs"></div>
    </body>
    <script language="JavaScript" src="../../site/c_side/jquery.js"></script>
    <script language="JavaScript">
        $(function(){
            $("#div_1")
                .animate({
                    opacity : 0.0
                }, 1000 , function(){
                    $("#div_2").animate({
                        opacity : 0.0
                    }, 1000 )
                })
        });
    </script>
</html>

不透明度动画在Firefox和Chrome中流畅播放，但不是Safari 5吗？为什么这样？ 我提前感谢您的帮助。

Answer 1

不知道原因，但您可能会尝试this jQuery plugin尝试将浏览器原生（CSS3）动画用于某些过渡（包括不透明度）。

Answer 2

不需要使用浮点值来获得不透明度，在Mac上的Safari 5中看起来相当平滑，我已经为你的盒子着色以进行演示，看看：http://jsfiddle.net/Gkfzd/1/。希望它有所帮助！

jQuery动画在Firefox和Chrome中流畅，但不是Safari 5

2 个答案: