Исчезать в каждом элементе - один за другим

Question

Я пытаюсь найти способ загрузить страницу JSON для отображения моего контента, который у меня есть в настоящее время. Но я пытаюсь исчезнуть в каждом элементе один за другим? Кто-нибудь знает способ сделать это?

Выцветать в каждом элементе с небольшой задержкой?

Вот пример моего кода, я использую фреймворк jquery.

КОД: http://pastie.org/343896

Answer 1

Допустим, у вас есть массив элементов span:

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

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

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

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

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

Answer 2

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

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

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

Answer 3

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

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

Answer 4

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

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


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

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

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

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

Answer 5

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