jquery - 在动态高度可见时为元素设置动画

Question

我知道如何使用 CSS 为元素设置动画。但是我正在尝试设置 jQuery，以便在用户向下滚动时激活 css 动画效果。所以基本都加到elements类中了。我知道如何根据设定的高度来做，但我有动态内容，其大小和高度会发生变化。我该如何处理不断变化的高度尺寸？

我希望当元素在浏览器中可见时激活 css。下面的代码根据设置的高度执行此操作，但我的内容是动态的。

设置高度的代码:

$(window).scroll(function() {
        $('#animatedElement').each(function(){
        var imagePos = $(this).offset().top;

        var topOfWindow = $(window).scrollTop();
            if (imagePos < topOfWindow+400) {
                $(this).addClass("slideUp");
            }
        });
    });

更新

请注意上面的代码不是我的，而是作者在 http://www.justinaguilar.com/animations/index.html#how .我可能没有在问题中表达清楚，以便更好地解释......

从根本上讲，我只是想在 div 在浏览器中可见时向它添加一个类(例如“幻灯片”)。我不能根据高度这样做，因为 div 可能在不同的地方。

Answer 1

这是一个工作示例。只需引用 slideUp 类更改 CSS 样式，例如为动态、非固定高度添加 overflow:hidden。

jQuery: animate element on scroll