0

我想要一个位于页面中心的 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>
4

1 回答 1

0

作为stupido一个HTMLCollection而不是数组，它的length属性被循环通过。stupido[i].style === undefined，生成错误，脚本崩溃。

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

工作小提琴

于 2012-12-02T13:31:44.200 回答