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可以工作，但是我感觉很讨厌，因为我需要提前知道预期有多少个节点。

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); 
});

甚至更好的（我已经完成了，我保证）

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

现在，我知道有一些funkiness如何传递$（this），以便最后一个不是优先级，但是让某种循环工作真的很不错。列出它们并重复所有代码并绑定到html会导致我死亡。

非常感谢帮助。：）

Answer 1

为什么不这样做：

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

Answer 2

你可以考虑使用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作为问题的“任意数量的孩子”部分。如果你事先知道了孩子的数量（或者至少知道孩子的最大数量是多少），你可以完全用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）在循环中生成这种类型的解决方案。）

Answer 3

想出来！

$(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); 
});

感觉很优雅。

使用jquery队列依次淡入任意数量的文本行

3 个答案: