Clever Geek Handbook

Why is there empty space between the two "divs" during animation?

Can anyone help me remove the space between them during animation?

Do I need to add another div to make both divs into one?

I decided to use position-top to customize the animation of the div, what is causing the problem and please suggest me a better way to make this animation, if any?

<!DOCTYPE HTML>
<html>

<head>
    <style>
        #top {
            background: white;
            color: white;
            width: 300px;
            height: 300px;
            display: inline-block;
            overflow: hidden;
        }

        #first {
            background: blue;
            transition: 0.5s;
            height: 300px;
            position: relative;
        }

        #second {
            background: green;
            transition: 0.5s;
            height: 300px;
            position: relative;
        }
    </style>
    <script>
        var up = true;
        var down = false;
        function animations() {
            if (up) {
                document.getElementById('first').style.top = '-300px';
                document.getElementById('second').style.top = '-300px';
                up = false;
                down = true;
            }
            else if (down) {
                document.getElementById('first').style.top = '0px';
                document.getElementById('second').style.top = '300px';
                down = false;
                up = true;
            }
        }

        //timer events
        var startAnimations = setInterval(animations, 1000);
    </script>
</head>

<body>
    <div id="top">
        <div id="first">first</div>
        <div id="second">second</div>
    </div>
</body>

</html>
Run codeHide result


+3


source to share


5 answers


When you move down, your second div element from the top is 0px instead of 300px;



Hope it helps.

+3


source


Don't add top style 300px

and the second div goes down, just set it 0px

as the first div. Both divs are relative and the first one is the second, so it wo 300px

n't 300px + first div

.

document.getElementById('second').style.top = '0px';


Hope helps

+3


source 


<!DOCTYPE HTML>
<html>

<head>
    <style>
        #top {
            background: white;
            color: white;
            width: 300px;
            height: 300px;
            display: inline-block;
            overflow: hidden;
        }

        #first {
            background: blue;
            transition: 0.5s;
            height: 300px;
            position: relative;
        }

        #second {
            background: green;
            transition: 0.5s;
            height: 300px;
            position: relative;
        }
    </style>
    <script>
        var up = true;
        var down = false;
        function animations() {
            if (up) {
                                      
                up = false;
                down = true;
            document.getElementById('first').style.top = '-300px'; 
                document.getElementById('second').style.top = '-300px';

            }
            else if (down) {
                down = false;
                up = true;
                document.getElementById('second').style.top = '0px';
                document.getElementById('first').style.top = '0px';
                
            }
        }

        //timer events
        var startAnimations = setInterval(animations, 1000);
    </script>
</head>

<body>
    <div id="top">
        <div id="first">first</div>
        <div id="second">second</div>
    </div>
</body>

</html>
Run codeHide result


+1


source


Because of your relative positioning. Use given css:

#top {
            background: white;
            color: white;
            width: 300px;
            height: 300px;
            display: inline-block;
            overflow: hidden;
            position:absolute;
        }

        #first {
            background: blue;
            transition: 0.5s;
            height: 300px;
            width:300px;
            position:absolute;
        }

        #second {
            margin:0px;
            background: green;
            transition: 0.5s;
            height: 300px;
            width:300px;
            position: absolute;
        }
0


source 


<!DOCTYPE HTML>
<html>

<head>
    <style>
        #top {
            background: white;
            color: white;
            width: 300px;
            height: 300px;
            display: inline-block;
            overflow: hidden;
        }

        #first {
            background: blue;
            transition: 0.5s;
            height: 300px;
            position: relative;
        }

        #second {
            background: green;
            transition: 0.5s;
            height: 300px;
            position: relative;
        }
    </style>
    <script>
        var up = true;
        var down = false;
        function animations() {
            if (up) {
                document.getElementById('first').style.top = '-300px';
                document.getElementById('second').style.top = '-300px';
                up = false;
                down = true;
            }
            else if (down) {
                document.getElementById('first').style.top = '0px';
                document.getElementById('second').style.top = '0';
                down = false;
                up = true;
            }
        }

        //timer events
        var startAnimations = setInterval(animations, 1000);
    </script>
</head>

<body>
    <div id="top">
        <div id="first">first</div>
        <div id="second">second</div>
    </div>
</body>

</html>
Run codeHide result


0


source






More articles:


All Articles