Анимация по таймеру javascript

298

26 ноября 2016, 17:55

Вопрос заключается в том что бы написать на чистом javascript код который позволит каждые определенные n секунд добавлять и удалять класс. Вот код собственно с которым я работаю, но метод который я использовал дает сбой и время сбивается. Буду рад любой помощи.

<script>
    var scaleElem = document.getElementById('par_mak');
            setInterval(myMethod_one, 6000);
            function myMethod_one( )
            {
              scaleElem.classList.add('infi_anim');
            }
            setInterval(myMethod_second, 12000);
            function myMethod_second( )
            {
              scaleElem.classList.remove('infi_anim');
            }
</script>

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

Answer 1

Если время должно быть одинаково между добавлением/удалением класса, можно просто создать флаг, который будет указывать, добавить или удалить класс.

var scaleElem = document.getElementById('par_mak'); 
var addClass = true; 
 
setInterval(addClassToScaleElem, 1000); 
 
function addClassToScaleElem( ) { 
  var classList = scaleElem.classList; 
  if (addClass) { 
    classList.add('infi_anim'); 
  } else { 
    classList.remove('infi_anim'); 
  } 
  addClass = !addClass; 
}

#par_mak { 
  width: 30px; 
  height: 30px; 
  background: blue; 
  transition: all .3s linear; 
} 
 
.infi_anim { 
  background: black !important; 
}

<div id="par_mak"></div>

Если разное, то можно опять же в одном методе отчищать его - clearInterval(interval) и заново запускать - interval = setInterval(addClassToScaleElem, counter);

Answer 2

var scaleElem = document.getElementById('par_mak'); 
setInterval(myMethod_one, 3000); 
function myMethod_one( ) 
{ 
  scaleElem.classList.add('infi_anim'); 
  setTimeout(function(){ scaleElem.classList.remove('infi_anim'); }, 300); 
}

.red-square 
{ 
  width:200px; 
  height:200px; 
  background:red; 
} 
 
.infi_anim 
{ 
  width:250px; 
  height:150px; 
  background:green; 
}

<div class="red-square" id="par_mak"> 
</div>

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

Все вопросы

ТОП-10

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

Как отправить данные из html файла в файл JS?

Допустим есть html страница, на ней есть элемент input, к html странице подключен js файл, в котором я хочу получить текст введенный в input, каким образом...

304

javascript