用于滚动显示的 jQuery 和 animate.css答案

【问题标题】：jQuery & animate.css for scrollReveal用于滚动显示的 jQuery 和 animate.css
【发布时间】：2016-08-08 11:06:02
【问题描述】：

我一直在尝试创建滚动效果的显示，我尝试了多个插件，但我似乎找不到任何适合我正在寻找的插件，如果他们这样做我不确定如何实现它可以有效地做我想做的事。

我得到了这段我一直在玩的 JavaScript 代码；

$(document).ready(function(){
        $(window).scroll(function(){
            $('.hideme').each(function(i){
                var bottom_of_object = $(this).offset().top + $(this).outerHeight();
                var bottom_of_window = $(window).scrollTop(); + $(window).height();
                if(bottom_of_window > bottom_of_object){
                    $(this).addClass('animated fadeInUp', 1000);
                }
            });
        });
    });

问题是动画只有在离开屏幕后才会添加，所以我必须滚动到我希望动画生效的位置才能真正起作用。一旦元素在窗口/浏览器的视图中，我不确定如何让 JS 实现 animate.css 代码。

我一直在尝试做的另一件事是使用 jQuery (removeClass) 方法删除类，但它只是隐藏并且显示的是没有动画的项目。

我使用了一个 gif 来说明我的问题（抱歉它太小了）。

还有一个 JsFiddle 可以进一步说明我的问题； https://jsfiddle.net/1hwpswow/

【问题讨论】：

将var bottom_of_window = $(window).scrollTop(); + $(window).height(); 替换为var bottom_of_window = $(window).scrollTop(); 不起作用？看来您已经尝试过了，因为您忘记删除分隔符
嗨，Carr，我确实尝试过，但它仍然在做同样的事情。我认为我需要更改的代码行是bottom_of_object 变量，我需要它来定位元素/对象的顶部而不是底部，这样当我滚动时它会在我滚动过去元素之前触发，而不是之后触发。不知道如何准确地实现这一点。谢谢。
让 bottom_of_object 只是 $(this).offset().top 不能满足您的需要吗？
嗨，Carr，我也尝试过。但是，当每个图块从窗口底部出现时，我希望元素动画。所以我需要将对象的顶部作为目标，以便在它到达窗口底部时出现。按照您建议的方式进行操作是我正在寻找的，但它是从窗口/浏览器的顶部而不是底部进行的。
我在下面贴了一个答案，不知道是否满足你的需要，希望对你有所帮助~

标签： jquery scroll scrolltop animate.css

【解决方案1】：

动画 css 与不透明度一起使用，您将不透明度设置为 0，动画应该可以工作！此外，每次使用时都必须删除和添加动画 css 的类！

【讨论】：

嗨，Db，我明白你的意思，但这不是问题。问题是试图让每个图块在其中一个图块到达窗口底部时设置动画或淡入淡出。

【解决方案2】：

在 begin 中设置一个 margin-top 并在您滚动完成后将其删除距离等于窗口的高度。这是一个小提琴： https://jsfiddle.net/Carr1005/1hwpswow/2/

 $(document).ready(function(){

    $('.hideme').eq(0).css('margin-top',$(window).height());    
    $(window).scroll(function(){

      console.log($(window).scrollTop());
      console.log($(window).height());
      if($(window).scrollTop() >= $(window).height())
        $('.hideme').eq(0).css('margin-top',0);

      $('.hideme').each(function(i){

        var top_of_object = $(this).offset().top;
                var bottom_of_window = $(window).scrollTop() + $(window).height();
                if(bottom_of_window > top_of_object){
                    $(this).addClass('animated fadeInUp', 1000);
                }

            });

        });
    });

【讨论】：