动画结束后的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