アニメーションは1回だけ再生できますか？

Question

divコンテナがビューポートに表示されたら、jpgファイルをアニメーションgifファイルに置き換えます。できます。重要：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 }); 
 
});

Answer 1

は、たとえば、ページのロード時にブール値を初期化します。

var played = false; 

次に、あなたのアニメーションが既に再生されているかどうかを確認し、実際にすることを忘れないでくださいifの内側にtrueを設定します。

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