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

时间:2012-08-10 15:02:41

标签: jquery callback

我正在创建一个覆盖网站的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>

1 个答案:

答案 0 :(得分:1)

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

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

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

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