所以我一直在研究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/

10-10 18:40
查看更多