停止播放不止一次的動畫

我有這個JS代碼。每當我滾動技能div，動畫重複。我希望它只在用戶到達div時加載一次，然後不會重複，除非再次加載頁面。停止播放不止一次的動畫

$(function() { 
    var oTop = $('#skills').offset().top - window.innerHeight; 
    var x = true; 

    $(window).scroll(function(){ 

     var pTop = $('body').scrollTop(); 
     console.log(pTop + ' - ' + oTop); 
     if(pTop > oTop){ 
       start_doughnut_animation(); 

     } 
    }); 
});

它重複，即使我在滾動動畫是使用布爾executed.I試過的中間，但它不工作

來源

2017-01-22 Kalol Party

您可以添加一個標誌變量，像：

$(function() { 
    var oTop = $('#skills').offset().top - window.innerHeight; 
    var x = true, 
     oneTime = false; 

    $(window).scroll(function(){ 

     var pTop = $('body').scrollTop(); 
     console.log(pTop + ' - ' + oTop); 
     if(pTop > oTop && !oneTime){ // check if oneTimeis also false 
       start_doughnut_animation(); 
       oneTime = true; // set oneTime so this can't happen again 
     } 
    }); 
});

來源

2017-01-22 20:09:29 Sam0

這完美地工作！謝謝@ Sam0 –

給自己從環逃生。

首先檢查，如果函數已運行。例如「if var executed is false」，然後運行你的動畫函數。在動畫結束時，將您的轉義變量設置爲true。

來源

2017-01-22 20:09:20

您可以使用jQuery API一個（）這個設置元素只運行一次例如使用

$(window).one("scroll", function() {

你可以找到更多文檔這裏http://api.jquery.com/one/

來源

2017-01-22 20:15:39

停止播放不止一次的動畫

回答

相關問題