Question

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

        }
    });
});

即使我在正在执行的动画中间滚动，它也会重复。我尝试使用布尔值，但它不起作用

Answer 1

让自己远离循环。

首先检查功能是否已运行。例如“如果var execute为false”，则运行动画功能。在动画结束时，将执行的转义变量设置为true。

Answer 2

您可以添加标志变量，例如：

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

Answer 3

你可以使用jquery api one（）这个元素只运行一次，例如使用

attachable_type |   attachable_id   |   attachment_type |   attachment_id
=============================================================================
Post            |   1               |   Photo           |   1
Post            |   1               |   Photo           |   2
Post            |   2               |   Video           |   1
Event           |   1               |   Photo           |   3
Event           |   1               |   Video           |   2

您可以在此处找到更多文档http://api.jquery.com/one/

停止动画多次播放

3 个答案: