0

ページの中央に div を配置したい (現在は 300px を使用)。数秒経過したら、2 番目の div を表示して、両方を 50px の差で中央に配置したい。私は今やった、私の最初の問題は、なぜ 2 番目の 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プロパティはループされます。、エラーが発生し、スクリプトがクラッシュします。HTMLCollectionlengthstupido[i].style === undefined

また、可能な場合は setTimeout で文字列を使用しないに変更for(var i in stupido)しますfor(i=0; i<stupido.length; i++)

働くフィドル

于 2012-12-02T13:31:44.200 に答える