Question

当div在视口上时，CSS动画开始。
我有{strong>未知个div个图标和2个文字行。

我需要什么：

相对于下一个图标，每个图标都有延迟动画。在我的jsfiddle中，所有图标都是同时动画的。
实际程序可能有1,2或300 divs带有图标，解决方案必须适用于任何数字，而不仅仅是我的jsfiddle示例中的3项。
< / LI>
我在divs上有引导程序，并且使用滚动控件，动画仅在div出现在视口上时启动，而在笔记本上我会连续显示6个图标，仅限智能手机1.

var $animation_elements = $('.animation-element');
var $window = $(window);

function check_if_in_view() {
    var window_height = $window.height();
    var window_top_position = $window.scrollTop();
    var window_bottom_position = (window_top_position + window_height + 15);

    $.each($animation_elements, function() {
        var $element = $(this);
        var element_height = $element.outerHeight();
        var element_top_position = $element.offset().top;
        var element_bottom_position = (element_top_position + element_height);

        //check to see if this current container is within viewport
        if ((element_bottom_position >= window_top_position) &&
           (element_top_position <= window_bottom_position)) {
              $element.addClass('in-view');
        else {
              $element.removeClass('in-view');
    }
});
$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');

Answer 1

在JavaScript中设置延迟操作的函数是setTimeout()，使用它可以为每个元素设置一个（在这种情况下）延迟操作（每次迭代）。但是在for循环中，你无法在setTimeout（）内实时访问外部变量，所以你需要通过一个闭包（ref1，ref2）来完成它：
```
(function(delay, $element, savedtimeout) {
     // 'savedtimeout'(alias of timeouts) is accessible.
     // but 'timeouts'(external var) is not accessible in realtime.
     savedtimeout[i][0] = setTimeout(function() {
         //Start animation
         $element.removeClass('paused');
         countInView--;
     }, delay, timeouts);
})(delay, $element, timeouts);
```
为了删除特定图标的延迟操作，您必须将其returning ID分配给变量，然后您可以使用removeTimeout(ID)使用给定ID中断其执行：
```
timeouts[i][0] = setTimeout(); // Returns an unique ID
clearTimeout(timeouts[i][0]);
```
- 您可以查看我的其他post，了解如何管理和保存每个图标的超时ID。
- 您正在使用$.each cannot be reset to 0其索引的函数，因此它为将来的实现提供了更少的选项。我宁愿用for循环替换它，利用它的索引。
缩小div宽度越多，智能手机能够显示的div就越多。所以你必须为宽度添加前缀，否则看起来每个div都将覆盖设备屏幕上的所有宽度：
```
.slide-left {
    width: 150px; /* e.g. */
}
```

完全解决方案：https://jsfiddle.net/quq2q9cg/

在视口

1 个答案: