Why animation works crookedly?

Question

JavaScript

For some reason, when I click on the search, the leaving input appears abruptly,

and then everything leaves normally. And the same at closing.

$(document).ready(function() {
    $("#searc_icon").click(function() {
        $("#search_get").animate({width: "toggle"}, 2000);
    });
});

css input

#search_get {
    float: right;
    display: none;
    outline: 0;
    border: 0;
    width: 251px;
    height: 66px;
    position: relative;
    background: #6DC715;
    color: #FFF;
    font-family: RobotoLight;
    font-size: 20px;
    padding-left: 25px;
}

Answer 1

=) Figured it out, put input into a div