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

Question

我需要你的帮助！

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

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

场景：

假设我们有 4 个盒子，它们有红色、蓝色、橙色和粉红色。
用户从顶部滚动到 500px 后 - 我想要第一个红色框淡入
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，因为我一直很欣赏所有解决方案，如果可行，我会投票赞成:)

谢谢！

score 2 · Accepted Answer

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

score 1 · Accepted Answer

基本上，您想要做的是：

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

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

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

2 回答 2

Related

Reference