jQuery - Why doesn't the alert animation work?

Question

Good day, I wrote this script which is supposed to show and animate an alert when clicking the submit button of a form. Showing the alert works fine but I can't get the animation to work. I hope you guys know what's wrong. By the way I have jQuery 1.11.2 as a CDN.

This is the script I wrote:

function profileSaved(error) {
    var alertbarContainer = $("#alertbar-container");
    var alertbar = $("#alertbar-container.alert");

    alertbarContainer.find(".alert").remove();

    alertbar
        .css({
            opacity: "0",
            top: "-32px"
        })
        .prependTo(alertbarContainer)
        .animate({
            top: "0px",
            opacity: "1"
        });

        setTimeout(function () {
            alertbar.animate({ top: "-32px", opacity: "0" }, function () {
                $(this).remove();
            });
        }, 3000);

    if(!error){
        $("#alertbar-container").append('<li class="alert alert-success" role="alert">Profile saved</li>');
    } else {
        $("#alertbar-container").append('<li class="alert alert-danger" role="alert">Saving profile failed</li>');
    }
}

Answer 1

You haven't provided the 'duration' required for the animation:

Ref: http://api.jquery.com/animate/

For instance:

alertbar
    .css({
        opacity: 0,
        top: -32
    })
    .prependTo(alertbarContainer)
    .animate({
        top: 0,
        opacity: 1
    }, 1000);

Will set the opacity to 1 from 0, progressively in 1 second. Pixels are the default value for setting in jQuery and quotes aren't really needed for decimals so that makes for a slightly cleaner code.

Answer 2

Thanks everyone! I messed around some more and I got it working fully: https://jsfiddle.net/t0byman/gpmt2g73/1/

function profileSaved(error) {
    var alertbarContainer = $("#alertbar-container");
    var alertbar = $("#alertbar-container .alert");

    alertbarContainer.find(".alert").remove();

    if(!error){
        $("#alertbar-container")
        .append('<li class="alert alert-success" role="alert">Profile saved</li>')
        .css({
            opacity: "0",
            top: "-32px"
        })
        .prependTo(alertbarContainer)
        .animate({
            top: "0px",
            opacity: "1"
        })
        .delay(3000)
        .animate({
            top: "-32px",
            opacity: "0"
        });
    } else {
        $("#alertbar-container")
        .append('<li class="alert alert-danger" role="alert">Saving profile failed</li>')
        .css({
            opacity: "0",
            top: "-32px"
        })
        .prependTo(alertbarContainer)
        .animate({
            top: "0px",
            opacity: "1"
        })
        .delay(3000)
        .animate({
            top: "-32px",
            opacity: "0"
        });
    }
}