javascript - 当动画父幻灯片移入视口(viewport)时，如何为嵌套内容设置动画，而不是使用滚动

Question

当父幻灯片移入视口(viewport)时，我希望使用 JavaScript 为父幻灯片中嵌套 DIV 的内容设置动画。

目前，只有在父幻灯片移到屏幕上后触发滚动命令时，嵌套 DIV 中的内容才会产生动画。我相信这是因为滑动 Action 是动画的而不是滚动控制的。

在我为探索该问题而创建的 JSFiddle 演示中也存在同样的问题:

http://jsfiddle.net/9dz3ubL1/

(此演示中幻灯片从右到左的动画移动是为了测试此问题而创建的，以在不滚动的情况下复制幻灯片的运动；它实际上不是开发本身的功能)。

我的问题是，当每个幻灯片元素移动到视口(viewport)中时，如何编写为每个嵌套 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

如果您的滑动 Action 是完全动画的(不是增量的，因为它在您链接的 jsfiddle 中)，那么 jQuery 为您提供了在动画完成后执行操作的能力。

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

查看可用于动画功能的选项。其中之一称为完成。您可以为完成选项分配一个函数，当动画完成时将调用该函数。

以您的一个动画为例，语法可能如下所示:

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

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

我之前用过它来控制幻灯片格式的嵌套动画，效果非常好!我希望这是您想要的。