последовательность затухания jquery

Question

Я пытаюсь исчезнуть в наборе div, один за другим. Я думал, что смогу использовать простую функцию For Each, которую предлагает jquery. Мой код выглядит следующим образом:

$('#menu_activate').click(function(){
  $('div.section').each(function(i){
    $(this).fadeToggle();     
  });
});

Хорошая вещь об этом состоит в том, что он выполняет итерацию по div, и они все исчезают, когда я нажимаю кнопку активации. Проблема в том, что между исчезающими элементами НЕТ ЗАДЕРЖКИ.

Есть идеи? Я попробовал функцию тайм-аута безрезультатно ...

Кроме того, fadeToggle - это пользовательская функция jquery, которая работает так, как вы ожидаете.

Спасибо заранее. Том.

Answer 1

Возможно, вы хотите setTimeout, и вы хотите, чтобы время ожидания увеличивалось с каждым делением. Проблема здесь заключается в том, что все fadeToggle вызываются сразу, без задержки. Поэтому вы должны ввести задержку самостоятельно. Есть несколько способов сделать это, вот один:

var myTimeout = 0;
var myIncrement = 300; // Wait 300ms between each div
$('#menu_activate').click(function(){
  $('div.section').each(function(i){
    setTimeout(function() { $(this).fadeToggle() },myTimeout);
    myTimeout += myIncrement;     
  });
});

В основном установите значение fadeToggle s после истечения времени ожидания, которое увеличивается с каждым делением.

Answer 2

Окончательный ответ!

  var myTimeout = 0;
  var myIncrement = 300; // Wait 300ms between each div
  $('#menu_activate').click(function(){
    $('div.section').each(function(i){
      setTimeout(function() { $('#section_'+i).show(); },myTimeout);
      myTimeout += myIncrement;     
    });
  });

Это был прирост, о котором я не думал, когда делал это ... и с ответом Адама он не имел в виду DIV с «этим», поэтому мне пришлось дать им индивидуальные идентификаторы и повторить это. вместо. Так близко Адам. Очень впечатляюще и большое спасибо за помощь!

Answer 3

$('#menu_activate').click(function(){
    $('div.section').each(function(i){
        $(this).queue(function() {
            $(this).fadeToggle();
            $(this).dequeue();
        });
    });
});