Question

我希望逐个淡入多个元素，每个元素之间有一个延迟，但我使用的是同一个类作为选择器。我使用each()来延迟每一个，由于某种原因，某些功能正在运行而某些功能正在运行。

例如，使用JQuerys逐个淡出元素：

$('.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：

描述：设置一个计时器以延迟执行后续项目队列中。

您需要将相关代码放入队列：

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

使用Waypoint和Each（）延迟到元素的addClass

2 个答案: