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

jQuery Waypoints插件逐个淡入元素

2 个答案: