Я пытаюсь изменить цвет фона конкретного class один за другим с помощью delay и не все одновременно.Изменение цвета фона одного класса, один за другим с задержкой
.item {
height: 50px;
width: 50px;
background-color: green;
margin-top: 10px;
}<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>Вот простое решение, используя набор тайм-аут со значением Инкрементирование для тайм-аута
http://codepen.io/Vall3y/pen/woQPeE
$('.item').each(function(i, item) {
setTimeout(function() {
item.classList.add('item--colored')
}, i * 250);
});
Спасибо большое! это исправлено it =) –
@Laurianti кажется приятным, но этот код минимален. но большое спасибо за ваш ответ. –
минимум этого? $ ('. item'). asyncCss ('backgroundColor', 'red')? ok – Laurianti
Комментарии показывают решения с JS. Таким образом, я закончу это, добавив способ сделать это в CSS только с анимацией и задержки:
.item {
height: 50px;
width: 50px;
margin-top: 10px;
background: black;
animation: colorit 0.5s linear;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.item:nth-child(2) {
animation-delay: 0.5s;
}
.item:nth-child(3) {
animation-delay: 1s;
}
.item:nth-child(4) {
animation-delay: 1.5s;
}
@keyframes colorit {
from {
background-color: black;
}
to {
background-color: green;
}
}
@-webkit-keyframes colorit {
from {
background-color: black;
}
to {
background-color: green;
}
}<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>Спасибо, я попытаюсь обработать это в своем javascript. и добавьте css динамически. –
jQuery.fn.extend({
\t asyncCss: function(a, b, c) {
\t var args = arguments;
return this.each(function(i) {
var j = $(this);
setTimeout(function() {
j.css.apply(j, args);
}, i * 1000);
});
}
});
function changeCssAsync() {
$('.item').asyncCss({
backgroundColor: 'red',
width: '10px',
height: '10px'
});
}.item {
height: 50px;
width: 50px;
background-color: green;
margin-top: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<input type="button" onclick="changeCssAsync()" value="Use me as .css() function" />
Hi. что ты уже испробовал? –
Чтобы подтвердить, что вы хотите применить зеленый цвет фона к первому элементу div, затем удалите его и примените ко второму, и так далее? –
[Это может помочь] (http://stackoverflow.com/questions/25351205/changing-color-of-multiple-divs-one-after-another) –