[英]jQuery - Why doesn't the alert animation work?
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>');
}
}
You haven't provided the 'duration' required for the animation:您尚未提供动画所需的“持续时间”:
Ref: http://api.jquery.com/animate/参考: 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.将不透明度从 0 设置为 1,在 1 秒内逐步设置。 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.
像素是 jQuery 中设置的默认值,小数实际上不需要引号,因此代码更简洁。
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"
});
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.