1

我正在创建一个 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 回答