Question

当用户滚动到页面时，我正试图在页面上设置几个标题的动画（淡入），但是当我到达第一个时，它会将它们全部淡入，无论我是否已经到达它们。

有人可以帮我弄明白我哪里出错吗？ jQuery看起来像：

$(window).scroll( function(){

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

        var bottom_of_object = $(this).position().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();

        if( $('hgroup').is('.heading1') && bottom_of_window > bottom_of_object ){

            $('.heading1').animate({'opacity':'1'},1000);                 
        }
        if( $('hgroup').is('.heading2') && bottom_of_window > bottom_of_object ){

            $('.heading2').animate({'opacity':'1'},1000);                 
        }
    });         


});

标记：

<section class="section">
<hgroup class="heading1">
    <h1>Title</h1>
    <h2>Sub-Title</h2>
</hgroup>
</section>
<section class="section">
<hgroup class="heading2">
    <h1>Title</h1>
    <h2>Sub-Title</h2>
</hgroup>
</section>

Answer 1

当你做一个条件来确定hgroup是否为heading1或heading2或者其他什么时，你没有指定一个特定的hgroup，所以条件总是为真（假设页面上存在heading1或heading2。所以那些.is条件没用了。

编辑：执行console.write或警报或断点以查看两个高度的值。看看你是否能找到奇怪的东西。

... e.g

alert('Bottom of Object: ' + bottom_of_object + '\nBottom Of Window: ' + bottom_of_window);

执行此操作并将其放入滚动功能中，以便在滚动时可以查看某些值。这应该会让你走上正确的道路。

编辑编辑：请参阅此页面上的“正确”答案：Check if element is visible after scrolling

使用jQuery在滚动动画单个项目

1 个答案: