Javascript выполняет действие после окончания анимации

Я хочу изменить текст после завершения анимации, но мне трудно найти что-то, что работает. Я пробовал таймеры, но это не работает, потому что время анимации отличается каждый раз (добавляет, что позже, но теперь это одно и то же каждый раз).Javascript выполняет действие после окончания анимации

$(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: [Читать ' анимированная документация] (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

см официального апи для animate

вы должны быть в состоянии только вызвать $ (эль) .animate(). Анимировать(), а второй одушевленные начнется только когда сначала заканчивается ...

Кроме того, функция анимации принимает параметр «ослабления», что-то вроде «easein», вероятно, сделает то, что вы хотите, не требуя вообще отслеживать время.

источник

2016-12-05 09:14:30 softwarenewbie7331

Javascript выполняет действие после окончания анимации

ответ

Смежные вопросы