Не работает скрипт в модальном окне

175

30 ноября 2018, 03:40

Мне нужно сделать анимацию в модальном окне, которое появляется при клике на кнопку. В приведенном ниже коде, есть пример рабочей анимации.Как сделать так чтобы анимация работала и во всплывающем окне?

$(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>

Answer 1

Запускайте анимацию после добавления html на страницу:

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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

не работает плагин owl-carousel

Всем здравствуйте! Нужна помощьЕсть модальное окно (#pop-up), которое появляется при клике на кнопку

165

javascript

Вывести циклом vue.js

Всем привет,ребят,немного глупый вопрос но как такую конструкцию вывести циклом,чтобы постоянно не дублировать код)

172

MySQL

jar Файл не подключается к MySQL

Написал программку на java, в коде прописал кнопку button, при нажатии на неё происходит подключение к БД MySQL но только из IDEA, а вот из jar файла подключение...

206

MySQL

Как в OpenCobol подключить mysql?

Может кто-нибудь сталкивался с Cobol и сможет подсказать как подключить mysql к OpenCobolЗнаю что EXEC openCobol не поддерживает а как по-другому подключить...

156