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动画卡在循环中

1 个答案: