0

我编写了这个 jQuery 来添加一个 css 类来在页面滚动到它时为元素设置动画，但是如果我在元素位于视口内时刷新页面，则会触发动画而根本不滚动。

这实际上是我希望它工作的方式，但我不明白它是如何工作的。在页面滚动之前不应该触发 .scroll 绑定吗？

我需要弄清楚这一点的原因是，当动画在页面刷新时播放并且元素在视线内时，它似乎切断了它的第一部分。就像在我的演示中一样，滑块下方的标题区域显示“为什么不添加标题...”，动画的不透明度从 0.1 淡入到 1，但是由于该元素靠近页面顶部，因此动画页面加载后立即添加，它发生得如此之快，你几乎看不到它。

http://bbmthemes.com/themes/smart/

<script type="text/javascript">
// element animation
(function ($, document, undefined) {

    $(window).scroll(function() {
    var animation1 = $('.animation1').offset().top;
    var animation2 = $('.animation2').offset().top;
        var winTop = $(window).scrollTop();
        var winHeight = $(window).height()-175;
        var winWidth = $(window).width();

        if(winWidth <= 750){
        $('.animated').addClass("opacity1");
        }

        if(winTop >= (animation1-winHeight)){
        $('.animation1').addClass("animate-fade");
        }
        if(winTop >= (animation2-winHeight)){
        $('.animation2').addClass("animate-fade");
        }
    });
})(jQuery, document);
</script>
4

1 回答 1

0

抱歉，我无法准确判断，但您可以尝试alert('scrolling');在事件处理程序的顶部添加以进行调试。

这将在事件第一次触发时暂停页面加载，并为您提供更多关于页面何时认为它正在滚动的线索。这可能会发现导致它的原因。

但是，是的，您认为 .scroll 不会在页面加载时触发是正确的。

于 2013-08-07T01:25:46.077 回答