1

Webサイトをオーバーレイするjqueryスプラッシュページを作成中です。2つのボックスが分割されるため、その後ろに分割が発生すると同時にフェードアウトするはずのボックスがありますが、正しく機能しません。2つのボックスが分割されるのを待ち、その後、ボックスがフェードします。

コールバックは黒いフェードボックスの後に設定されるので、なぜこれが起こっているのかわかりません。イベントは同時に発生すると想定されています。私のコードは間違っていますか？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <meta name="robots" content="noindex, nofollow" />
        <link rel="stylesheet" type="text/css" href="includes/css/style.css" />
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $(".left,.right").delay(800).animate({
                    width: 0
                }, 1100);
                $(".black").delay(2300).animate({
                    opacity: 0
                }, function () {

                    $(".left,.right,.black").css('display', 'none');
                });
            });
        </script>
        <style type="text/css">
            body {
                background-color: #333;
                margin:0;
                height:100%;
                width:100%;
            }
            .left {
                background-color: #FFF;
                height: 100%;
                width: 50%;
                position: absolute;
                left: 0px;
                top: 0px;
                z-index: 999;
            }
            .right {
                background-color: #FFF;
                height: 100%;
                width: 50%;
                position: absolute;
                top: 0px;
                right: 0px;
                z-index: 999;
            }
            .black {
                background-color: #000;
                height: 100%;
                width: 100%;
                position: absolute;
                top: 0px;
                right: 0px;
                z-index: 998;
            }
        </style>
    </head>

    <body>
        <div class="left"></div>
        <div class="right"></div>
        <div class="black"></div>
    </body>

</html>
4

1 に答える 1

1

アニメーションの前に 2300 ミリ秒 (2.3 秒) の遅延があるため、ボックスはフェードする前に待機します。最初のアニメーションが終了するのを待っているのではなく、2.3 秒待っています。

また、ブラックボックスのフェードが終了すると、最初のアニメーションが行われたかどうかに関係なく、すべて非表示になります。

遅延を 800 に変更してみてください(および と.black同じ)。また、アニメーションの時間を同じにして、同時に終了する (したがって非表示になる) ようにします。.left.right

例: http://jsfiddle.net/NTICompass/PVqec/

于 2012-08-10T15:20:48.663 に答える