Home/ Questions/Q 8389419
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T18:43:18+00:00

I am in the process of creating a jquery splash page to overlay a

  • 0

I am in the process of creating a jquery splash page to overlay a website. As the 2 boxes split apart, there is a box behind it which is suppose to fade out at the same time as split occurs but it wont work properly. It waits for the 2 boxes to split then after that is complete the box fades.

The callback is set after the black fades box so i’m not sure why this is happening. The events are suppose to happen simultaneously. Is my code wrong?

<!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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The box waits before it fades because there is a 2300ms (2.3 second) delay before that animation. It’s not waiting for the 1st animation to finish, it’s waiting 2.3 seconds.

    Also, when the black box finishes fading, it hides all of them regardless of whether the 1st animation is done or not.

    Try to change the delay on .black to 800 (the same as .left and .right). Also make the animation times the same, so that they finish (and thus hide) at the same time.

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

    • 0