jQuery 动画卡在循环中

Question

我的网站上有一些简单的功能可以让这个小精灵动起来/让它看起来像是在滚动后向上或向下传送。文档准备好后动画工作得很好，但滚动后它以某种方式陷入某种故障循环。我需要修复此问题，以便它看起来就像页面加载时一样。我不明白为什么它会像那样出现故障。 Here is the fiddle，这里是 jQuery:

var SpriteVis;
 var ScrollTimer = 2000;

 function tele_in($) { // function to make sprite appear.
     $("#sprite").animate({
         bottom: '0px'
     }, 400, 'linear', function () {
         $("#sprite").css({
             'background-image': 'url(http://localhost:8888/wordpress/wp-content/themes/DigitalBrent/media/images/Warp-Sprite.png)',
                 'height': '50px',
                 'width': '90px',
                 'left': '300px',
                 'bottom': '80px'
         });
         setTimeout(function () {
             $("#sprite").css({
                 'background-image': 'url(http://localhost:8888/wordpress/wp-content/themes/DigitalBrent/media/images/test-sprite.png)',
                     'height': '120px',
                     'width': '96px'
             });
         }, 80);
     });
     SpriteVis = true;
 };

 jQuery(function ($) {

     $(document).ready(function () {
         // Call tele_in()
         tele_in($);
     });

     $(window).scroll(function () {
         ScrollTimer = 2000;
         if (SpriteVis == true) { //if Sprite is present on screen, run the animation sequence to make it disappear.
             $("#sprite").css({

                 'background-image': 'url(http://localhost:8888/wordpress/wp-content/themes/DigitalBrent/media/images/Warp-Sprite.png)',
                     'height': '50px',
                     'width': '90px',
                     'left': '300px',
                     'bottom': '80px'

             });
             setTimeout(function () {
                 $("#sprite").css({

                     'background-image': 'url(http://localhost:8888/wordpress/wp-content/themes/DigitalBrent/media/images/Teleport-Sprite.png)',
                         'height': '188px',
                         'width': '52px',
                         'left': '330px'

                 });
                 $("#sprite").animate({
                     bottom: '2000px'
                 }, 400, 'linear', function () {});
             }), 80;
             SpriteVis = false;
         } else {
             // Call tele_in() after 3 seconds

             setTimeout(function () {
                 tele_in($);
             }, ScrollTimer);

         }
     });
 });

Answer 1

跳槽的主要原因是你没有清除你的超时时间（你设置的越来越多）。工作示例 in this Fiddle，我不得不使用示例图像。您需要的脚本部分：

var SpriteVis;
var ScrollTimer = 500;
var timeouts = null;

function tele_in($) { // function to make sprite appear.
    $("#sprite").animate({
        bottom: '0px'
    }, 400, 'linear', function () {
        clearTimeout(timeouts);
        timeouts = setTimeout(function () {
            $("#sprite").css({
                'background-image': 'url(http://placehold.it/96x120)',
                'height': '120px',
                'width': '96px'
            });
        }, 80);
    });
    SpriteVis = true;
};

jQuery(function ($) {

    $(document).ready(function () {
        // Call tele_in()
        tele_in($);
    });

    $(window).scroll(function () {
        if (SpriteVis == true) { //if Sprite is present on screen, run the animation sequence to make it disappear.
            clearTimeout(timeouts);
            timeouts = setTimeout(function () {
                $("#sprite").css({
                    'background-image': 'url(http://placehold.it/52x188)',
                    'height': '188px',
                    'width': '52px',
                    'left': '330px'
                });
                $("#sprite").animate({
                    bottom: '1000px'
                }, 1000, 'linear', function () {});
            }), 80;
            SpriteVis = false;
        } else {
            // Call tele_in() after 3 seconds
            clearTimeout(timeouts);
            timeouts = setTimeout(function () {
                tele_in($);
            }, ScrollTimer);

        }
    });
});

在设置超时之前你也设置了一些样式，我清理掉了。

jQuery 动画卡在循环中

jQuery animation getting stuck in loop

jquery

animation

scroll

function