jQuery

Question

美好的一天，我写了这个脚本，它应该在单击表单的提交按钮时显示并动画提醒。显示警报效果很好，但我无法让动画正常工作。我希望你们知道什么是错的。顺便说一下，我有 jQuery 1.11.2 作为 CDN。

这是我写的脚本：

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

您还没有提供动画所需的'duration'：

参考：http://api.jquery.com/animate/

例如：

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

将在 1 秒内将不透明度从 0 逐渐设置为 1。像素是 jQuery 中设置的默认值，小数不需要引号，因此代码更简洁。

Answer 2

谢谢大家！我又搞砸了一些，让它完全正常工作：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"
        });
    }
}

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

jQuery - Why doesn't the alert animation work?

javascript

forms