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

您还没有提供“＃”持续时间＆＃39;动画需要：

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

例如：

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

将不透明度从0设置为1，逐步增加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"
        });
    }
}

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

2 个答案: