jQuery Waypoints插件逐一淡入元素

Question

我使用的是航点jQuery插件，并且在滚动时进行淡入时，该插件的运行情况非常好。 但是，我无法设法使这些块一个接一个地淡入（个体化）。 这是我的jQuery代码：

$('.hblock').not("#welcome, #block2").fadeTo(0, 0);
$('.hblock').waypoint(function(event, direction) {
    if(direction == "down") {
        $(this).fadeTo(1500, 1);
        event.stopPropagation();
    }
}, {
    offset: function() {
        return $.waypoints('viewportHeight');
    }
});

我尝试设置淡入淡出之间的延迟，但无济于事：

$(this).fadeTo(1500, 1).delay(1000);

您可以在这里查看该插件的运行方式以及当前的工作方式： http ： //targettedmedia.co.uk/targetedmedia/

预先感谢您抽出宝贵的时间！

Answer 1

如果要序列化一组对象的动画，请使用$(this).fadeTo(1500, 1);代替$(this).fadeTo(1500, 1);

尝试这个：

$('.hblock').each(function(i) {
    $(this).delay((i++) * 1500).fadeTo(1500, 1); 
 })

如果希望它们在前一个完成之前启动，则可以尝试使用前1500个。 这是一个示例（朝下）：

http://demosthenes.info/blog/630/Fade-In-Elements-Sequentially-With-JQuery-amp-CSS3

Answer 2

这样的事情怎么样

function _fadeout(elm){
    elm.fadeOut('slow', function(){
       _fadeout(elm.next());
    })
}

_fadeout($('.hblock').not("#welcome, #block2").first());