過渡不適用於元素

Question

我想在頁面中心放置一個div（我現在使用300px），幾秒鍾后，我想使第二個div可見，並使它們都以50px的差異位於中心，這就是我現在已經做完了，我的第一個問題是為什么第二個div的不透明度更改不適用？

<!DOCTYPE html>
<html>
<head>
    <title>Whatever</title>
    <meta charset="utf-8" />
    <style type="text/css">
        #main {
            position: absolute;
            top: 200px;
            left: 300px;
        }

        div.c {
            width: 200px;
            height: 200px;
            float:left;
            position:relative;
            left:200px;
            -webkit-transition:left 2s;
        }

        #left {
            background-color: palevioletred;
        }

        #right {
            -webkit-transition:opacity 2s;
            background-color: ThreeDDarkShadow;
            opacity:0;
        }
    </style>

    <script type="text/javascript">
        window.onload = function () {
            setTimeout("myfunc()", 3000);
        }

        function myfunc() {
            var stupido = document.getElementsByClassName("c");
            for (var i in stupido) {
                stupido[i].style.left = 0;
            }
            document.getElementById("right").style.opacity = 1;
        }
    </script>
</head>
<body>
    <div id="main">
        <div id="left" class="c">x</div>
        <div id="right" class="c">x</div>
    </div>
</body>
</html>

Answer 1

由於stupido是HTMLCollection而不是數組，因此它的length屬性被循環通過。 stupido[i].style === undefined ，生成錯誤，腳本崩潰。

將for(var i in stupido)更改for(var i in stupido) for(i=0; i<stupido.length; i++)
另外，盡可能不要在setTimeout中使用字符串

工作提琴

過渡不適用於元素

問題描述

1 個解決方案

解決方案1
0 已采納 2012-12-02 13:31:44

過渡不適用於元素

問題描述

1 個解決方案

解決方案1 0 已采納 2012-12-02 13:31:44

解決方案1
0 已采納 2012-12-02 13:31:44