jQuery добавить класс к случайному div после случайной задержки

Question

Я пытаюсь добавить класс «flip» к случайному «дочернему» div после случайного периода времени между 0,5 и 5 секундами. Затем класс должен быть удален три секунды спустя.

дивы выкладываются как:

<div class="parent"> 
    <div class="child"><img src="image.jpg"></div> 
    <div class="child"><img src="image.jpg"></div> 
    <div class="child"><img src="image.jpg"></div> 
    <div class="child"><img src="image.jpg"></div> 
    <div class="child"><img src="image.jpg"></div> 
    <div class="child"><img src="image.jpg"></div> 
</div> 

и JQuery, что у меня до сих пор:

$(document).ready(function() { 
    var $children = $(".child"); 
    var interval = setInterval(function() { 
     var $d = $children.not(".flip"); 
     $d.eq(Math.floor(Math.random() * $d.length)).addClass('flip'); 
     if ($d.length == 1) { 
      clearInterval(interval); 
     } 
    }, Math.floor((Math.random() * 4500) + 500)); 
}); 

Не слишком уверен, как удалить класс снова через 3 секунды Тхо?

Спасибо!

Answer 1

Вы должны использовать setTimeout в конце вашей функции в интервале:

$(document).ready(function() { 
    var $children = $(".child"); 
    var interval = setInterval(function() { 
     var $d = $children.not(".flip"); 
     var $el = $d.eq(Math.floor(Math.random() * $d.length)); 
     $el.addClass('flip'); 
     setTimeout(fucntion() { $el.removeClass('flip'); }, 3000); 
     if ($d.length == 1) { 
      clearInterval(interval); 
     } 
    }, Math.floor((Math.random() * 4500) + 500)); 
}); 

Answer 2

От вас кода, так как вы хотите добавить класс только один раз, наряду с таймером тайм-аута, вам придется использовать еще один дополнительный класс, а также

$(document).ready(function() { 
    var $children = $(".child"); 
    var interval = setInterval(function() { 
     var $d = $children.not(".done"); 
     var $el = $d.eq(Math.floor(Math.random() * $d.length)).addClass('flip done'); 
     setTimeout(function() { 
      $el.removeClass('flip'); 
     }, 3000) 
     if ($d.length == 1) { 
      clearInterval(interval); 
     } 
    }, Math.floor((Math.random() * 4500) + 500)); 
}); 

Демо: Fiddle

---

Другой вариант

$(document).ready(function() { 
    var $todo = $(".child"); 
    var interval = setInterval(function() { 
     var $el = $todo.eq(Math.floor(Math.random() * $todo.length)).addClass('flip'); 
     setTimeout(function() { 
      $el.removeClass('flip'); 
     }, 3000) 
     if ($todo.length == 1) { 
      clearInterval(interval); 
     } 
     $todo =$todo.not($el); 
    }, Math.floor((Math.random() * 4500) + 500)); 
}); 

Демо: Fiddle