使用Waypoints和Each()添加延迟到元素的addClass

Question

我想在多个元素一个接一个地淡出，每个元素之间有延迟，但我使用相同的类作为选择器。我使用each()来延迟每个函数，由于某种原因，有些函数工作，有些不工作。

例如，使用jquery逐个淡出元素:

$('.featured-properties').waypoint(function() {
    $('.props').each(function(i) {
        $(this).delay(500*i).fadeOut(); 
    });
}, { offset: '70%' });

但是添加一个类会同时执行这些操作:

$('.featured-properties').waypoint(function() {
    $('.props').each(function(i) {
        $(this).delay(500*i).addClass('slide-in'); 
    });
}, { offset: '70%' });

我的希望是用CSS3创建动画，所以我想添加一个类，但由于某种原因，它一次添加了所有的类。

HTML标记-

<section class="container featured-properties">
    <div class="span25 props">
        <p>Some text...</p>
    </div>
    <div class="span25 props">
        <p>Some text...</p>
    </div>
    <div class="span25 props">
        <p>Some text...</p>
    </div>
    <div class="span25 props">
        <p>Some text...</p>
    </div>
</section>

Answer 1

来自DOC:

描述:设置一个定时器，以延迟后续项目的执行队列。

你需要把相关的代码放到queue中:

$(this).clearQueue().delay(500*i).queue(function(){$(this).addClass('slide-in');});

dequeue()或clearQueue()来保持队列尽可能干净。

Answer 2

您可以使用setTimeout而不是delay，因为delay只适用于队列。

setTimeout(function(){
  $(this).addClass('slide-in');
}, 500 * i);