停止播放不止一次的动画

我有这个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

停止播放不止一次的动画

回答

相关问题