0

div in と div out をサイドインすることになっているこの単純な JavaScript コードがあります。スライドインに関しては完全に機能しています。完全に機能することで、divを簡単にスライドできます。ただし、スライドアウトをクリックすると、div がブラウザから消えます。原因がわからず、欠点を見つけることができません。私のコードはここにあります

<!DOCTYPE html>
<html>
    <head></head>
    <body>

        <script>

            function slideIt()
            {
                var stopPosition = 50;
                var slidingDiv = "";
                slidingDiv = document.getElementById("d3");
                if (parseInt(slidingDiv.style.left) < stopPosition )
                {
                    slidingDiv.style.left = parseInt(slidingDiv.style.left) + 2 + "px";
                    setTimeout(slideIt, 1);
                }
            }

            function slideOut()
            {
                var startPosition =-150;
                var slidingDiv = "";
                slidingDiv = document.getElementById("d4");
                if (parseInt(slidingDiv.style.left) > startPosition )
                {
                    slidingDiv.style.left = parseInt(slidingDiv.style.left) - 2 + "px";
                    setTimeout(slideOut(), 1);

                }
            }



        </script>
        <div id="d1" onclick="slideIt();">Slide in</div>
        <div id="d2" onclick="slideOut();">Slide out</div>
        <div id="d3" style="position: absolute; left:-150px; top:300px" >horizontally sliding div</div>
        <div id="d4" style="position: absolute; left:150px; top:300px">horizontally sliding div</div>


    </body>
</html>
4

1 に答える 1

1

slideOut2 番目のタイムアウトで呼び出す必要はありません。括弧を削除します。

setTimeout(slideOut, 1);

ここにデモンストレーションがあります: http://jsfiddle.net/cctqf/

于 2012-12-08T14:15:56.140 に答える