Question

我正在创建一个覆盖网站的jquery启动页面。当两个盒子分开时，它后面有一个盒子，假设在分裂发生的同时淡出，但它不能正常工作。等待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>

Answer 1

框在等待之前等待，因为在该动画之前有2300ms（2.3秒）的延迟。它不是等待第一个动画完成，它等待2.3秒。

此外，当黑匣子完成褪色时，无论第一个动画是否完成，它都会隐藏所有这些。

尝试将.black上的延迟更改为800（与.left和.right相同）。同时使动画时间相同，以便它们同时完成（并因此隐藏）。

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

Jquery效果表现得像回调。事件顺序问题。为什么？

1 个答案: