Затухание в произвольном количестве текстовых строк последовательно с очередью jquery

Question

Это становится довольно специфичным, но я хочу, чтобы у вас могло исчезать произвольное число детей последовательно и с задержкой синхронизации с использованием очереди jquery (хотя я открыт для других методы). Вот что я уже работаю.

Это основной HTML блок я работаю с

<header> 
    <p class="copy">Thing one</p> 
    <p class="copy">Thing two</p> 
    <p class="copy">Cat in the Hat</p> 
</header> 

Этот ток JQuery работает, но он чувствует Hacky ко мне в том, что мне нужно знать заранее, сколько узлов ожидать.

var $screenHeader = $('header'); 
$screenHeader.queue(function() { 
    $screenHeader.find('.copy:nth-child(1)').addClass('visible'); 
    $(this).dequeue(); 
}) 
.delay(1500) 
.queue(function() { 
    $screenHeader.find('.copy:nth-child(2)').addClass('visible'); 
    $(this).dequeue(); 
}) 
.delay(1500) 
.queue(function() { 
    $screenHeader.find('.copy:nth-child(3)').addClass('visible'); 
    $(this).dequeue(); 
}) 
.delay(1500); 

Я хотел бы, если бы что-то вроде этого работал

for (var i = 1; i < $screenHeader.children().length+1; i++) {   
    $screenHeader.queue(function() { 
    $screenHeader.find('.copy:nth-child('+i+')').addClass('visible'); 
    $screenHeader.dequeue(); 
    }).delay(1500); 
} 

или еще лучше

$screenHeader.children().each(function (i) { 
    $screenHeader.queue(function() { 
    $screenHeader.find('.copy:nth-child('+i+')').addClass('visible'); 
    $screenHeader.dequeue(); 
    }).delay(1500); 
}); 

или даже больше betterer (тогда я сделал, я обещаю)

$screenHeader.children().each(function() { 
    $screenHeader.queue(function() { 
    $(this).addClass('visible'); 
    $screenHeader.dequeue(); 
    }).delay(1500); 
}); 

Теперь я знаю, что есть некоторые f неудобство с тем, как $ (this) передается так, что последний не является приоритетом, но было бы очень приятно получить какой-то цикл работы. Вывод их и повторение всего этого кода и привязка к html убивает меня.

Справка была бы принята с благодарностью. :)

Answer 1

Выяснил это!

$(this) внутри петли $screenHeader.queue(... был заголовком. Мне нужно было сохранить дочерний элемент перед входом в очередь очереди.

var delayTime = 1500, 
    $screenHeader = $('#screen-'+screenIndex+' header'), 
    $copyChildren = $screenHeader.children('.copy'); 

$copyChildren.each(function() { 
    var child = $(this); 
    $screenHeader.queue(function() { 
    child.addClass('visible'); 
    $screenHeader.dequeue(); 
    }).delay(delayTime); 
}); 

Feelin classy.

Answer 2

Почему бы не сделать так:

var $elements = $('header').find('.copy'); 
$($elements).each(function(i, ui){ 
    setTimeout(function(){ 
     $(ui).addClass('visible'); 
    },(i*1500)); 
}); 

Answer 3

Вы могли бы рассмотреть возможность использования CSS для синхронизации анимации, вместо JQuery.

См. this live example.

А вот код:

HTML:

<header> 
    <p class="copy">Thing one</p> 
    <p class="copy">Thing two</p> 
    <p class="copy">Cat in the Hat</p> 
</header> 

CSS:

@keyframes fade-in { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 

header p { 
    opacity: 0; 
    animation-name: fade-in; 
    animation-duration: 1s; 
    animation-fill-mode: forwards; 
} 

JS:

$(function() { 
    $('header').children().each(function(idx) { 
    $(this).css('animation-delay', idx * 500 + 'ms') 
    }); 
}); 

В моем решении, я использую только JQuery для «произвольного числа o f children "часть вашего вопроса. Если бы вы знали число детей заранее (или, по крайней мере, имели представление о том, что максимальное количество детей может когда-либо), вы могли бы сделать анимацию полностью в CSS:

header p:nth-child(2) { animation-delay: 500ms; } 
header p:nth-child(3) { animation-delay: 1s; } 
/* So on and so forth until your bases are covered... */ 

(Этот тип решение было бы очень легко генерировать в цикле с использованием препроцессора CSS, такого как Sass или Less.)