用户滚动到 N 点后如何触发动画 - 具有多个动画 .animate() 的 jQuery 航点答案

【问题标题】：How to trigger animation after user scroll to N points - jQuery waypoints with multiple animation .animate()用户滚动到 N 点后如何触发动画 - 具有多个动画 .animate() 的 jQuery 航点
【发布时间】：2013-05-02 14:46:37
【问题描述】：

我需要你的帮助！

基本思路：我希望当用户滚动到一个点（在页面中间 - 假设它距离顶部 500 像素）然后我们有一些动画，当然我不会问如何做所有动画的东西，但我需要你给我关于回调的基本概念

我的意思是回调：在第一个动画之后，我们得到第二个动画，然后是第三个动画。我该如何处理？

场景：

假设我们有 4 个盒子，它们有红色、蓝色、橙色和粉红色。
用户从顶部滚动到 500 像素后 - 我想要第一个红色框淡入
2 秒后，我希望红色框淡出，蓝色框淡入。
在我最初的想法中，我需要它们旋转或一些其他动画 - 如果你也可以这样做，那就太好了:)，如果你认为我要求太多，请忽略这一点

工具：

jQuery 航点http://imakewebthings.com/jquery-waypoints/

也许是 jQuery 中转？ http://ricostacruz.com/jquery.transit/

 <!DOCTYPE html>
 <html>
 <head>
  <title></title>
  <meta charset="utf-8">
 </head>
 <body>


  <div id="container">
    <div class="red box"></div>
    <div class="blue box"></div>
    <div class="orange box"></div>
    <div class="pink box"></div>
  </div>
 </body>
 </html>

+1 以获得正确的解决方案，因为我一直很欣赏所有解决方案，如果可行，我会投票赞成 :)

谢谢！

【问题讨论】：

标签： jquery html css animation transition

【解决方案1】：

我正在使用 jQuery 航点。

这将在相关元素完全可见时触发，这意味着它的底部高于视口底部：

$('.red_box').waypoint(function(direction){
  $('.red_box').fadeIn();
  window.setTimeout(animateBlue, 2000);
},{offset: 'bottom-in-view'});

动画开始，在动画期间计时器启动，两秒后将调用指定的函数。

function animateBlue(){
  $('.red_box').fadeOut(function(){
    $('.blue_box').fadeIn();
  });
  window.setTimeout(animatePink, 2000);      
}

function animatePink(){
  $('.blue_box').fadeOut(function(){
    $('.pink_box').fadeIn();
  });
}

红色框淡出，动画完成后蓝色框淡入。

对于更多动画，您可以使用更多航点或在特定时间后使用另一个呼叫。有关淡入淡出功能 api 的帮助，请参阅
http://api.jquery.com/category/effects/fading/
（你可能知道）

当然，您可以调整时间和动画开始的时间。
我不确定您是否希望在动画完成后开始两秒钟。我也不确定红色和蓝色是否应该同时淡出和淡入。

轮换：
http://javascriptisawesome.blogspot.de/2011/09/jquery-css-rotate-and-animate-rotation.html

【讨论】：

不，红色应该先淡出，然后蓝色淡出。所以你的 animateBlue() 代码似乎是正确的，你能帮我举个例子吗，如果有另一个函数，假设它是函数 animatePink()。我还是不明白把它放在哪里:)
如果您只想在 2 秒后再次出现粉红色的：我添加了一些代码可以做到这一点。对于另一个航路点，只需使用上面的代码。

【解决方案2】：

基本上，你想做的是：

$('#el1').fadeIn(500,function(){
    $('#el1').delay(2000).fadeOut(500,function(){
        $('#el2').fadeIn(500)
    })
})

当一个动画完成后，它会调用另一个！

【讨论】：

如何调用另一个？到目前为止，我总是找到文章或示例进行一次回调。我可以简单地在其中再次添加一些 ,function(){} 吗？最佳实践可以吗？谢谢
您可以尝试使用 jquery promises - 它基本上是为链接函数设置的，并避免在回调中启动函数。 The first answer here is a good example
是的，没错。 andymacd 注释会使其更清晰和最佳。
好的，太好了！我是jQuery的新手，我应该在做之前复制粘贴吗？ $.chain = function() { var promise = $.Deferred().resolve().promise(); jQuery.each( arguments, function() { promise = promise.pipe( this ); });回报承诺； };
很难理解您的代码，因为它没有格式化，但这里是一个可行的承诺：jsfiddle.net/J9ESe