为什么警报动画不起作用？

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.

美好的一天,我写了这个脚本,它应该在单击表单的提交按钮时显示和动画警报。显示警报工作正常,但我无法使动画工作。我希望你们知道什么是错的。顺便说一下,我将jQuery 1.11.2作为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>');
    }
}

2 个解决方案

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

将不透明度从0设置为1,逐步增加1秒。像素是在jQuery中设置的默认值,并且小数不需要引号,因此可以使代码更加清晰。

#2

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

感谢大家!我搞砸了一些,我完全搞定了: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"
        });
    }
}

#1