我如何只播放動畫一次？

我一個GIF動畫文件時，DIV容器出現在視口中替換JPG文件。有用。重要提示：gif文件沒有循環。我的問題是：當你再次滾動時，即使有點，上或下，替換再次播放。第一次更換後是否有簡單的解決方案來阻止此事件？感謝我如何只播放動畫一次？

jQuery(document).ready(function($){ 
 
\t 
 
\t var $window = $(window); 
 
\t var $elem = $(".animated") 
 

 
\t \t function isScrolledIntoView($elem, $window) { 
 
\t \t \t var docViewTop = $window.scrollTop(); 
 
\t \t \t var docViewBottom = docViewTop + $window.height(); 
 

 
\t \t \t var elemTop = $elem.offset().top; 
 
\t \t \t var elemBottom = elemTop + $elem.height(); 
 

 
\t \t \t return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
 
\t \t } 
 

 

 
\t $(document).on("scroll", function() { 
 
\t \t if (isScrolledIntoView($elem, $window)) { 
 
\t \t \t $("#graph1").attr("src","images/graphsSECHE_500x500_noloop2.gif"); 
 
\t \t } 
 
\t \t 
 
\t }); 
 
});

來源

2017-04-05 Ludovic Foulonneau

設置一個全局布爾並將其設置爲true或false基於是否已播放的視頻或沒有，然後添加到您的支票 – Pete

或者如果它字面上看就是改變只有一個元素，你可以取消綁定文件上的滾動事件處理程序一旦它被使用過一次？ –

或做類似皮特的評論，但你可以指定數據使用jQuery的數據功能元素本身，然後檢查每個元素。這樣就可以讓許多元素獨立分配。 –

在初始化頁面加載一個布爾值，例如：

var played = false;

如果你的動畫作爲已經起到然後檢查，不要忘記實際設置它真正的內如果由：

if (isScrolledIntoView($elem, $window) && played === false) { 
    $("#graph1").attr("src","images/graphsSECHE_500x500_noloop2.gif"); 
    played = true; 
}

來源

2017-04-05 09:13:53 DocWeird

謝謝你非常非常DocWeird：它的工作原理與VAR起到=真 –

哈哈，是的，你是正確的 - 在我的部分錯誤。我有點匆忙。答案已更正。 – DocWeird

我如何只播放動畫一次？

回答

相關問題