Как сделать задержку между действиями одной функции в js или jQuery ? Например добавить один класс, а через какое то время ещё один.
2 ответа
Если вас интересует анимация, то у 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>
К примеру таким образом. С интервалом в секунду добавляется класс .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>