JavaScript的爆發while循環當函數被調用再次

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動畫試過了，沒有工作

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>