Question

每次滚动时我想在标题中淡化元素，所以我创建了这个函数：

function headerAnimation() {
    if(isScrolledIntoView('.vintage-header')) {
      $('.header-logo, .festival, .atelieru, .konani').each(function(fadeInElem) {
        $(this).css('visibility', 'visible').delay(fadeInElem * 1000).fadeIn(1000);
      });
    }
    if(isScrolledIntoView('#theme')) {
      $('.header-logo, .festival, .atelieru, .konani').each(function() {
        $(this).hide();
      });
    }
}

// note：isScrolledIntoView测试div是否在视口中

现在我设置间隔：

$(document).ready(function() {
    headerAnimationID = setInterval(headerAnimation, 33);
});

在第一次加载页面时，它工作正常，但每次我将向下滚动然后回到标题，元素将以不正确的，随机顺序淡入:-(如果我将setInterval设置为4000，它工作正常，但它＆＃ 39;太久你才能看到第一个元素。我该如何解决这个问题？

Answer 1

你应该做的

if(isScrolledIntoView('.vintage-header')) {
      $('.header-logo, .festival, .atelieru, .konani').each(function(fadeInElem) {
        $(this).delay(fadeInElem * 1000).fadeIn(1000);
      });
    }

在DOM准备集display:none;上隐藏。

Answer 2

使用此：

 if(isScrolledIntoView('.vintage-header')) {
          $('.header-logo, .festival, .atelieru, .konani').each(function(fadeInElem) {
            $(this).delay(fadeInElem * 1000).fadeIn(1000);
          });
        }

Answer 3

只需将stop（）添加到隐藏函数$(this).stop().hide();即可停止动画（fadeIn）。此外，您可以添加检查元素是否在滚动视图中，这样您就不必一直使用间隔触发该功能，仅在用户滚动时。

function isScrolledIntoView(elem) {
    var $window = $(window),
        docViewTop = $window.scrollTop(),
        docViewBottom = docViewTop + $window.height(),
        elemTop = $(elem).offset().top,
        elemBottom = elemTop + $(elem).outerHeight();
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

$(window).on("scroll", function () {    
    if (isScrolledIntoView('.vintage-header')) {
        $('.header-logo, .festival, .atelieru, .konani').each(function (fadeInElem) {
            $(this).css('visibility', 'visible').delay(fadeInElem * 1000).fadeIn(1000);
        });
    }
    if (isScrolledIntoView('#theme')) {
        console.log('in');
        $('.header-logo, .festival, .atelieru, .konani').each(function () {
            $(this).stop().hide();
        });
    }
});

.vintage-header {
    background: green;
}
#theme {
    background: red;
}
.spacer {
    height: 800px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="vintage-header">
    <div class="header-logo">Header Logo</div>
    <div class="festival">festival</div>
    <div class="atelieru">atelieru</div>
    <div class="konani">konani</div>
</div>
<div class="spacer"></div>
<div id="theme">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem nesciunt libero doloribus nisi suscipit perspiciatis tenetur mollitia vitae incidunt culpa quo tempore dolor animi quidem similique accusamus reprehenderit veniam fuga?</p>
</div>

JQuery delay（）打破了fadeIn序列

3 个答案: