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?

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:

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):


 .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>

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


      $(".container").animate({top: '-1000'}, 1000);