I need to make an animation in a modal window that appears when I click on a button. In the code below, there is an example of a working animation. How to make the animation work in a pop-up window?

$(document).ready(function() { const $div = $('#load-1'); const MAX_ANGLE = -359; let angle = 0; const animate = () => { if (angle >= MAX_ANGLE) { requestAnimationFrame(animate); } $div.css('transform', `rotate(${angle}deg)`); angle -= 3; } animate(); setTimeout(function() { $("#load-1").attr("src", "https://cdn1.savepice.ru/uploads/2018/8/31/96bbb1518df72fed40351c0ba63688c0-full.png"); }, 2500); }); $(document).ready(function() { $('.click').click(function() { $('body').append( "<div class='modal' style='width:500px; height: 500px; background-color: red;'>" + "<div class='loader-content'>" + "<img src='https://cdn1.savepice.ru/uploads/2018/8/31/04b1f66f088ceaf6d6aa44902cd28bdf-full.png' id='load-1' class='load-img'>" + "<span>Header</span>" + "</div>" + "</div>") }); }); 
 <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <div class="col-lg-6 loader-content"> <img src="https://cdn1.savepice.ru/uploads/2018/8/31/04b1f66f088ceaf6d6aa44902cd28bdf-full.png" id="load-1" class="load-img" /> <span>Header</span> </div> <button class="click">button</button>

    1 answer 1

    Run the animation after adding html to the page:

     function runLoadingAnimation(selector) { const $div = $(selector); const MAX_ANGLE = -359; let angle = 0; const animate = () => { if (angle >= MAX_ANGLE) { requestAnimationFrame(animate); } $div.css('transform', `rotate(${angle}deg)`); angle -= 3; } animate(); setTimeout(function() { $(selector).attr("src", "https://cdn1.savepice.ru/uploads/2018/8/31/96bbb1518df72fed40351c0ba63688c0-full.png"); }, 2500); } $(document).ready(function() { runLoadingAnimation('#load-1'); }); $(document).ready(function() { $('.click').click(function() { $('body').append( "<div class='modal' style='width:500px; height: 500px; background-color: red;'>" + "<div class='loader-content'>" + "<img src='https://cdn1.savepice.ru/uploads/2018/8/31/04b1f66f088ceaf6d6aa44902cd28bdf-full.png' id='load-2' class='load-img'>" + "<span>Header</span>" + "</div>" + "</div>") runLoadingAnimation('#load-2'); }); }); 
     <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <div class="col-lg-6 loader-content"> <img src="https://cdn1.savepice.ru/uploads/2018/8/31/04b1f66f088ceaf6d6aa44902cd28bdf-full.png" id="load-1" class="load-img" /> <span>Header</span> </div> <button class="click">button</button>

    • Everything is cool! Thanks! - Pavel Bogdanov