Question

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

Answer 1

以下是使用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>

Answer 2

我建议使用动画库而不是像这样创建自己的动画。例如，速度js表现得非常好。

我不确定我是否完全理解你的动画，但我认为这也是它的作用：

对于停止部分，我创建了一个需要改进的小假人 - 但是你明白了。显然，该元素也应该被删除等等......

var animation;

$('#start').on('click', function() {
  var el = document.createElement('div');
  el.style.position = 'absolute';
  el.style.bottom = '10px';
  el.style.right = '10px';
  el.appendChild(document.createTextNode('Alert text'));
  el.style.backgroundColor = 'red';
  document.body.appendChild(el);
  animation = $(el).velocity({
    translateY: document.body.scrollHeight * -1 + 'px',
    opacity: 0
  }, {
    duration: 4000
  });

});

$('#stop').on('click', function() {
  $(animation).velocity('stop');
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.3.1/velocity.min.js"></script>
<button id="start">
  Start animation
</button>

<button id="stop">Stop</button>

当再次调用该函数时，javascript会跳出while循环

2 个答案: