Затухание в каждом элементе - один за другим

Ответ 1

Ну, вы можете настроить свои функции выцветания, чтобы вызвать "следующий".

 $("div#foo").fadeIn("fast",function(){
      $("div#bar").fadeIn("fast", function(){
           // etc.
      });
   });

Но таймер может быть лучшей системой или функцией, которая получает их все, помещает их в массив, а затем выталкивает их поочередно с задержкой между ними, затухая их по одному за раз.

Ответ 2

Скажем, у вас есть массив элементов span:

$("span").each(function(index) {
    $(this).delay(400*index).fadeIn(300);
});

(быстрая заметка: я думаю, вам нужно jQuery 1.4 или выше, чтобы использовать метод .delay)

Это будет в основном ждать определенного количества времени и исчезать каждый элемент. Это работает, потому что вы умножаете время ожидания по индексу элемента. Задержки будут выглядеть примерно так, когда они повторяются через массив:

• Delay 400 * 0 (без задержки, просто fadeIn, что мы хотим для самого первого элемента)
• Задержка 400 * 1
• Задержка 400 * 2
• Задержка 400 * 3

Это делает хороший эффект "один за другим" fadeIn. Его также можно использовать с slideDown. Надеюсь, это поможет!

Ответ 3

Как насчет этого?

jQuery.fn.fadeDelay = function() {
 delay = 0;
 return this.each(function() {
  $(this).delay(delay).fadeIn(350);
  delay += 50;
 });
};

Ответ 4

Думаю, вам понадобится что-то вроде этого:

var elementArray = yourAjaxRequestReturningSomethingEdibleByJQuery();
fadeInNextElement(elementArray);


function fadeInNextElement(elementArray)
{
    if (elementArray.length > 0)
    {
        var element = elementArray.pop();
        $(element).fadeIn('normal', function()
        {
             fadeInNextElement(elementArray);
        }
    }
}

Внимание: я не тестировал его, но даже если он не работает, вы должны получить эту идею и легко ее исправить.

Кстати, я не согласен с использованием таймера. С таймером нет ничего, гарантирующего, что элементы будут исчезать один за другим, а замирание одного элемента начнется только в том случае, если предыдущий закончен.

Теоретически, он должен работать, но могут быть случаи, когда ваша "цепочка" должна по какой-то причине остановиться или анимация замирания не может закончить вовремя и т.д. Просто используйте правильную цепочку.

Ответ 5

Отметьте jQuery fadeIn() с помощью setTimeout() (стандартная функция JS). Вы можете проверить что-то, что я сделал на этом сайте http://www.realstorage.ca/. Я в основном скрываю и показываю их, чтобы они могли идти в цикле.

Ответ 6

Из приведенных выше ответов я придумал что-то вроде этого, которое хорошо сработало для меня.

HTML

<div id="errorMessage" class="d-none" ></div>

Javascript

var vehicle = {

error: (error, message) => {
    if(error){
        vehicle.popUp(message, 'bg-danger');
    }else{
        vehicle.popUp(message, 'bg-success');
    }
},
popUp: (array, bgColor) => {

    var errorBox = $('#errorMessage');

    errorBox.removeClass('d-none');
    $.each(array, function(i,e){
        i=i+1;
        var messageBox = '<div id="'+i+'" class="'+bgColor+' text-white">'+e+'</div>';
        $(messageBox).appendTo(errorBox).delay(100*i+0).slideDown(100*i+0,function(){
            $('#'+i).delay(1000*i+0).slideUp(400*i+0, function(){
                $('#'+i).remove();    
            });
        });
    });               
},

}