如何在动画父级幻灯片移动到视口中时使用嵌套内容进行动画制作，而不是使用滚动

Question

当父级幻灯片移动到视口中时，我正在使用JavaScript来为父幻灯片中的嵌套DIV的内容设置动画效果。

此刻，嵌套​​的DIV中的内容只会在父幻灯片移动到屏幕后触发滚动命令时才动画。我相信这是因为幻灯片动画是动画而不是滚动控制的。

同样的问题是在这的jsfiddle演示戏我创建探讨的问题：

http://jsfiddle.net/9dz3ubL1/

（右起在本演示向左滑动的动画运动已经建立，以测试这个问题，复制幻灯片的运动而不滚动;它实际上并不是开发本身的特征）。

我的问题是，当每个幻灯片元素移动到视口中时，我怎样才能为每个嵌套的DIV触发动画，而不需要滚动功能？

感谢您的任何帮助。以下是我用来控制不透明度和其他CSS样式的脚本。

$(document).ready(function() { 
 
    /* Every time the window is scrolled ... */ 
 
    $(window).scroll(function() { 
 
    /* Reveal hidden_header delayed */ 
 
    $('.hidden_header').each(function(i) { 
 
     var center_of_object = $(this).offset().left + $(this).outerWidth(); 
 
     var center_of_window = $(window).scrollLeft() + $(window).width(); 
 
     /* If the object is completely visible in the window, fade it it */ 
 
     if (center_of_window > center_of_object) { 
 
     $(this).animate({ 
 
      'opacity': '1' 
 
     }, 500); 
 
     $(this).animate({ 
 
      'right': '0' 
 
     }, 1500); 
 
     } 
 
    }); 
 
    /* Reveal hidden_content delayed */ 
 
    $('.hidden_content').each(function(i) { 
 
     var center_of_object = $(this).offset().left + $(this).outerWidth(); 
 
     var center_of_window = $(window).scrollLeft() + $(window).width(); 
 
     /* If the object is completely visible in the window, fade it it */ 
 
     if (center_of_window > center_of_object) { 
 
     $(this).animate({ 
 
      'opacity': '1' 
 
     }, 3000); 
 
     $(this).animate({ 
 
      'bottom': '0' 
 
     }, 3500); 
 
     } 
 
    }); 
 
    /* Reveal button delayed */ 
 
    $('.button').each(function(i) { 
 
     var center_of_object = $(this).offset().left + $(this).outerWidth(); 
 
     var center_of_window = $(window).scrollLeft() + $(window).width(); 
 
     /* If the object is completely visible in the window, fade it it */ 
 
     if (center_of_window > center_of_object) { 
 
     $(this).animate({ 
 
      'opacity': '1' 
 
     }, 5000); 
 
     } 
 
    }); 
 
    }); 
 
});

Answer 1

如果你的滑板运动是完全动画（不是增量，因为它是在你链接的的jsfiddle）然后jQuery的为您提供您的后动画完成执行动作的能力。

http://api.jquery.com/animate/

看看你可以使用动画功能的选项。其中之一被称为完成。您可以为done选项指定一个函数，并在动画完成时调用该函数。

使用您的动画之一为例，语法可能如下：

$(this).animate({ 
       'opacity': '1' 
      }, {duration: 3000, done: function() { 
       //animate some stuff here 
    }}; 

请注意，我只是选择了一个随机动画从您的代码。我不确定你是否想要执行内容的动画，但是你可以在使用jQuery动画的任何地方使用这种技术。

我以前用这个来控制幻灯片格式的嵌套动画，它工作得很好！我希望这是你想要的。