使用 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 有效，但我觉得很麻烦，因为我需要提前知道预期有多少个节点。

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

现在，我知道 $(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')
  });
});

在我的解决方案中，我仅对问题的 "arbitrary number of children" 部分使用 jQuery。如果你事先知道 children 的数量（或者，至少知道 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... */

（使用像 Sass or Less 这样的 CSS 预处理器在循环中很容易生成这种类型的解决方案。）

Answer 3

想通了！

$(this) 在 $screenHeader.queue(... 循环中是 header。在进入循环 queue 部分之前，我需要存储 child 。

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 队列按顺序淡入任意数量的文本行

Fade in arbitrary number of text lines sequentially with jquery queue

javascript

queue

jquery

transitions

sequential