動畫結束後的Javascript performe動作

我想在動畫完成後更改文字，但我很難找到有效的東西。我已經嘗試過計時器，但實際上並不是每次工作都會使動畫的時間不同（稍後會添加，但現在每次都是相同的）。動畫結束後的Javascript performe動作

$(document).ready(function() { 
 
     $("button").click(function() { 
 
      var r = Math.floor(Math.random() * 2) + 1 
 

 
      var moveTime; 
 
      if (r == '1') { 
 
       moveTime = 5000; 
 
      } else if (r == '2') { 
 
       moveTime = 4900; 
 
      } 
 
      var slowDown = 1000; 
 
      var $div = $('div').css('left', 0); 
 

 
      while (moveTime > 0) { 
 
       slowDown--; 
 
       $div.animate({ 
 
        left: moveTime + "px" 
 
       }, 3000); 
 

 
       if (slowDown > 0) { 
 
        slowDown--; 
 
        moveTime = 0; 
 
       } 
 

 
       slowDown--; 
 
       moveTime--; 
 
      } 
 

 
      document.getElementById("timer").innerHTML = r; 
 

 

 
     }); 
 

 
    });

div { 
 
     position: absolute; 
 
     float: left; 
 
     margin: 200px 0 0 -8400px; 
 
     width: 10000px; 
 
     height: 125px; 
 
     background: repeating-linear-gradient(90deg, #DF0000, #DF0000 125px, #000000 125px, #000000 250px) 
 
    } 
 
    
 
    h1 { 
 
     text-align: center; 
 
     margin: 130px 0 0 0; 
 
     font-size: 90px; 
 
    } 
 
    
 
    body { 
 
     overflow: hidden; 
 
    }

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Document</title> 
 
</head> 
 

 
<body> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <button>Start Animation</button> 
 
    <div></div> 
 
    <h1 id="timer">|</h1> 
 

 
</body>

來源

2016-12-05 Patte

步驟1：[閱讀' animate'文檔]（http://api.jquery.com/animate）。 –

可以使用promise()方法將您的動畫映射到承諾的數組，然後使用Promise.all()做一些事情的時候都已經解決：

var promisesArr = []; 

while (moveTime > 0) { 
    // ... 

    promisesArr.push($div.animate({ 
     left: moveTime + "px" 
    }, 3000).promise()); 

    // ... 
} 

Promise.all(promisesArr).then(function() { 
    var r = Math.floor(Math.random() * 2) + 1 
    document.getElementById("timer").innerHTML = r; 
});

見Fiddle

來源

2016-12-05 09:17:38 haim770