1

Как сделать задержку между действиями одной функции в js или jQuery ? Например добавить один класс, а через какое то время ещё один.

2 ответа 2

1

Если вас интересует анимация, то у jquery есть .delay()

$(document).ready(function() {
  $('#foo').click(function() {
    t = $(this);
    t.slideUp().delay(1000).slideDown()
  });
});
#foo {
  width: 200px;
  height: 200px;
  background-color: gray;
}
#foo.first {
  border: 1px solid red;
}
#foo.second {
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo"></div>

Если НЕ анимация — то обычный setTimeout

$(document).ready(function() {
  $('#foo').click(function() {
    t = $(this);
    t.addClass('first')
    setTimeout(function() {
      t.addClass('second')
    }, 1000);
  });
});
#foo {
  width: 200px;
  height: 200px;
  background-color: gray;
}
#foo.first {
  border: 1px solid red;
}
#foo.second {
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo"></div>

1

К примеру таким образом. С интервалом в секунду добавляется класс .red ко всем div'ам с классом .box:

var elements = $('.box');
var element  = 0;
var delay = setInterval(function(){
  if (element <= elements.length){
    $(elements[element]).addClass('red');
    element += 1;
  }else{
    clearInterval(delay);
  }
},1000);
.red {
    color:red
}
.box {
    display:block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box">1</div> <div class="box">2</div> <div class="box">3</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.