暂停滚动到下一个’滑动’直到所有动画完成
我正在为Skrollr滑块创建一个“有限的”可视化构建器。 它允许用户构建由页面上相互位于一起的幻灯片（html section标记）组成的滑块，每个幻灯片包含许多应用了Skrollr数据属性/动画（关键帧？）的html元素。
有没有办法暂停幻灯片（前进到下一张幻灯片），直到所有内部元素都完成了动画？
我知道pausing.html的例子，它展示了我需要的东西，但这些“幻灯片”已修复，可能pausing.html我的用户带来问题。 滑块将被放入WordPress网站主题，大多数元素都没有修复。
因为幻灯片内容是如此动态和不可预测，很难知道锁定滚动多长时间？ 希望有可能做到这一点？
我的困境的例子：
https://stackoverflow.com/questions/32238511/pause-scrolling-to-next-slide-till-all-animations-are-complete/.... Some regular WordPress page content (Navbar, Header maybe posts, etc.) // Pause this slides scrolling till all child elements have completed their animations // Slide child elements will ALWAYS have relative animations (data-100-top="http://sofzh.miximages.com/jquery/.." NOT data-100="http://sofzh.miximages.com/jquery/..") Some awesomeness
https://stackoverflow.com/questions/32238511/pause-scrolling-to-next-slide-till-all-animations-are-complete/... lots of other elements https://stackoverflow.com/questions/32238511/pause-scrolling-to-next-slide-till-all-animations-are-complete/.... Some regular WordPress page content (Footer, maybe posts, etc.)
请参考以下资源：
- Skrollr
- Skrollr菜单
- 如何以编程方式禁用jQuery页面滚动
- Skrollr Parallax教程
- jQuery
.promise()和$.when.promise()
的index.html
Demo - Simple parallax scrolling tutorial 
我忘记了对_main.js的其他修改，它们用✓注释：
_main.js
( function( $ ) { // Setup variables $window = $(window); $slide = $('.homeSlide'); $body = $('body'); //FadeIn all sections $body.imagesLoaded( function() { setTimeout(function() { // Resize sections adjustWindow(); // Fade in sections $body.removeClass('loading').addClass('loaded'); }, 800); }); function adjustWindow(){ // Init Skrollr // Added Skrollr and Skrollr Menu init ✓ var s = skrollr.init(); skrollr.menu.init(s, { animate: true }); // Get window size winH = $window.height(); // Keep minimum height 550 if(winH <= 550) { winH = 550; } // Resize our slides $slide.height(winH); // Refresh Skrollr after resizing our sections // Added the Skrollr refresh ✓ s.refresh(); } } )( jQuery );
禁用下一个按钮直到动画完成，您可以在CSS动画完成后启用。 这是一篇解释如何跟踪CSS动画回调的文章。