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(i=0; i<stupido.length; i++)
另外，don't use string in setTimeout when possible

Working fiddle

过渡不适用于元素

1 个答案: