所以我一直在研究javascript警报动画,
function addalert(text){
if(alertid >= 100){
alertid = 0;
}
document.body.innerHTML += ("<div id=\"" + alertid + "\" " + "class=\"alert\">" + text + "</div>");
var top = parseInt($("#"+alertid).css('top'));
while($("#"+alertid).css('top') > 0){
setInterval($("#"+alertid).css({"top": $("#"+alertid).css("top") - 1,"opacity":$("#"+alertid).css("opacity") -0.1}), 100);
}
$("#"+alertid).css({"top":"0","opacity":"0"});
alertid++;
return;
}
问题在于,当您已经调用了该函数并且正在进行动画时,调用此函数时,它似乎会脱离动画。
编辑:
我尝试使用jQuery animate,但没有用
function addalert(text){
if(alertid >= 100){
alertid = 0;
}
document.body.innerHTML += ("<div id=\"" + alertid + "\" " + "class=\"alert\">" + text + "</div>");
$("#"+alertid).animate({"top":"0px","opacity":"0"}, {easing: "linear", duration: 2000, complete: function(){$("#"+alertid).remove()} });
/*$("#"+alertid).css({"top":"0","opacity":"0"});*/
alertid++;
}
最佳答案
这是使用animate()
的演示。请注意,该代码还需要正确设置CSS,否则将无法正常工作。更准确地说,已设置动画的div
必须设置其position
样式。
要在必须开始新动画时中断正在进行的动画,请使用.finish()
。这是一个显示两个警报的工作片段,其中第二个警报仅在中途中断时会中断第一个警报:
var alertid = 0;
function addalert(text){
if(alertid >= 100){
alertid = 0;
}
// Finish any ongoing alert animation
$('.alert:last()').finish();
// Add the div in the jQuery way:
$("<div>").attr('id', alertid).addClass('alert').text(text)
.appendTo(document.body)
.animate({
top: "0px",
opacity: "0"
}, {
easing: "linear",
duration: 2000,
complete: function(){
// You can use `this` here:
$(this).remove();
}
});
alertid++;
}
// Demo
$(function() {
addalert('first alert');
setTimeout(function () {
addalert('second alert interrupted the first');
}, 1000);
});
.alert {
position: absolute;
top: 100px;
left: 0px;
background: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
关于javascript - 再次调用该函数时,javascript会退出while循环,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39810681/