JQuery的延遲（）打破淡入序列

我想在頭淡入元素每次你在上面滾動的時間，所以我創造了這個功能：JQuery的延遲（）打破淡入序列

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(); 
     }); 
    } 
}

//注：isScrolledIntoView測試，如果股利是在視

現在我設置的時間間隔：

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

在頁面的第一負載，它工作正常，但每次我會向下滾動，然後回到頭球攻門，元素將淡入不正確的，洗牌順序:-(如果我將setInterval設置爲4000，它可以很好地工作，但是它太長了才能看到第一個元素。我該如何解決這個問題？

來源

2015-02-23 user3216673

你爲什麼要設置'CSS（ '知名度'， '看得見'）'？ – void 2015-02-23 10:42:40

因爲我在文檔準備好的時候爲所有元素設置了'visibility：hidden''，所以如果有人關閉了js，他會看到內容 – user3216673 2015-02-23 10:46:22

請參閱下面的更新回答。 – void 2015-02-23 10:51:54

只需添加停止（）的隱藏功能$(this).stop().hide();停止動畫（淡入）。此外，您可以添加檢查元素是否在滾動視圖中，因此您不必隨時間間隔隨時觸發該功能，僅當用戶滾動時纔會觸發該功能。

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>

來源

2015-02-23 11:17:41

真棒，謝謝！ – user3216673 2015-02-23 11:28:27

你應該只是做

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

而且在DOM準備設置display:none;隱藏。

來源

2015-02-23 10:43:16 void

使用此：

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

來源

2015-02-23 10:45:48

JQuery的延遲（）打破淡入序列

回答

相關問題