在每个窗帘在中间相遇后，我如何添加延迟来滚动？

Question

我想暂停动画大约20px的滚动后，每个窗帘在中间相遇。这是我的沙箱：

http://www.meetgeraldine.net/2016website/luke-test/

jQuery：http://snippi.com/s/vup8pw0

HTML：http://snippi.com/s/bp5iceg

有没有办法让窗帘暂停大约20px的滚动，这样在两个区块在中间相遇后，窗帘就不会立即消失？

Answer 1

如果你接受基于库的答案，有一个很好的解决方案：

skrollr https://github.com/Prinzhorn/skrollr

你可以查看教程，解释如何使用这个库来实现你的目标：

ihatetomatoes https://ihatetomatoes.net/create-scrolling-slideshow-using-skrollr/

主要思想是这样的:用你的主要内容的高度100%+20px创建页面，然后用js转换你的内容位置。当你的滚动在50%-10px和50%+10px之间时，你可以停止转换主要内容。

Answer 2

这是一个定时动画中继器的例子。它等待所有动画完成，然后在超时后重复它们。不是100%确定这是你想要的，但希望你能在此基础上构建：(注意，我没有测试这段代码，但它应该可以工作。被延迟的需要jQuery；

function pullCurtains(){
    $.when(
        $('body,html').animate({'scrollTop': target.offset().top}, 500, function(){ animating = false; }).promise(),
        $( '#mything-2' ).animate( { marginLeft : "-100px" }, 500 ).promise(),
        $( '#mything-3' ).animate( { width: 0 }, 1000 ).promise()
    ).done( function(){
        console.log( "All animations complete." );
        setTimeout(function() {
            // trigger new one in 2000 ms
            $(document).trigger('curtian');
        }, 2000);
    });
};
$(document).on('curtian',function(){
    pullCurtains();
});
// do first one
$(document).trigger('curtian');