No animation is happening when I change the position from my container from "absolute" to "initial", altough it gets set from the middle of the screen to the top?

1

Hi guys,

I’m doing the wikipedia page right now.
Now that I’m satisfied with the general look of the search page I want to go to the next step => Viewing the results.

First things first my Github: https://github.com/dhuber666/wikipediaJS

My idea is following:

When I hit the search Button the div slides on top and then the wikipedia divs with articles appears below.

I have centered the search vertically and horizontally like that (thats the only way that worked after googling 30 minutes):

CSS:

 .container {
     display: flex;
     justify-content: center;
     align-items: center;
     position: fixed;
     top: -20%;
     right: 0;
     bottom: 0;
     left: 0;
 }

That code puts the whole search in the middle.
When I set the display property from flex to initialthe div is on top of the page (like I want it to be).
But I want to animate it. So slide up smoothly to the top.

Here is the HTML btw:

<div class="container">
        <div class="search">
            <h1>Search Wikipedia</h1>
            <form action="#" method="get" id="form">
                <input type="search" name="search" id="wikiSearch">
                <button id="searchBtn" type="button"><i class="fa fa-search" aria-hidden="true"></i></button>
            </form>
        </div>
</div>

I googled and found a few ways but nothing is working.

My current javascript setup is this (with comments):

$(document).ready(function() {

    //TODO: When I click the SearchBtn the .search div should scroll on top of the page
    $("#searchBtn").on("click", function(){  // select the search button
        $(".container").animate({ // select the .container
            "position" : "initial" //set it's position to initial

        }, 1000); // with 1 second transition
    });
});

But unfortunately that does nothing.

How can I solve this problem? I also tried out keyframes but that didn’t work either.

Please help me to make a nice slide up animation :slight_smile:

Thx guys and gals!!