Как скрыть див один за другим через javascript?

#javascript #jquery

Как скрыть див один за другим через javascript? Я сделал но чета не получается!



$(document).ready(function() {
    setInterval(function(){
        $('.div').hide();
        next();
    }, 1000);
});
.div {
  width: 300px;
  margin: 10px;
  padding: 10px;
  background: #567;
  color: #fff;
}

Div 1
Div 2
Div 3
Div 4
Div 5



    

Ответы

Ответ 1

Можно сразу задать каждому элементу свой таймаут:



function delayedHide(i,o) {
  setTimeout(
    function(){
      $(o).hide();
    },
    600 * (i + 1)
  );
}

$(function() {
  $('.hideme').each( delayedHide);
});
.hideme {
  width: 300px;
  margin: 10px;
  padding: 10px;
  background: #567;
  color: #fff;
}

Div 1
Div 2
Div 3
Div 4
Div 5




Не удержался, переименовал класс..


Ответ 2

А вот так это можно сделать без jQuery:



function hideOne(elements, index) {
    if (index < elements.length) {
        elements[index].style.display = "none";
        ++index;
        setTimeout(hideOne.bind(null, elements, index), 1000);
    }
}
function hide() {
    var elements = document.getElementsByClassName("div");
    setTimeout(hideOne.bind(null, elements, 0), 1000);
}
.div {
    width: 300px;
    margin: 10px;
    padding: 10px;
    background: #567;
    color: #fff;
}

    
Div 1
    
Div 2
    
Div 3
    
Div 4
    
Div 5





Можно сразу установить таймауты для скрытия всех div'ов:

function hideOne(element) {
    element.style.display = "none";
}
function hide() {
    var elements = document.getElementsByClassName("div");
    for (var i = 0; i < elements.length; ++i)
        setTimeout(hideOne.bind(null, elements[i]), 1000 * (i + 1));
}