我想在页面中心放置一个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>

最佳答案

由于stupidoHTMLCollection而不是数组,因此其length属性被循环通过。 stupido[i].style === undefined,生成错误,脚本崩溃。

for(var i in stupido)更改为for(i=0; i<stupido.length; i++)
另外,don't use string in setTimeout when possible

Working fiddle

10-02 13:38