javascript - jQuery Waypoints 插件一个一个地淡入元素

Question

我正在使用 waypoints 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);

尝试这个：

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