jQuery

Question

我正在尝试运行快速滚动动画，但我无法在必要时重复所需的效果。文档准备好后，我的网站上出现了一个卡通小人：

Var SpriteVis;

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

上面的代码工作正常，但是我希望卡通人在滚动时消失，如果用户没有滚动 3 秒，我希望卡通人重新出现。我可以让卡通消失，但我根本无法让它回来。我不确定是不是因为我没有正确调用该函数，或者我是在错误的地方调用它还是什么，但我完全被难住了。这是摆脱卡通的功能，应该回调它：

jQuery(function ($) {
    $(window).scroll(function () {
        if (SpriteVis == true) {  //if Sprite is present on screen, run the animation sequence to make it disappear.
        $("#sprite").css({
           'background-image': 'url(/images/Warp-Sprite.png)',
           'height': '50px',
           'width': '90px',
           'left': '300px',
           'bottom': '80px'
        });
        setTimeout(function () {
            $("#sprite").css({
           'background-image': 'url(/images/Teleport-Sprite.png)',
           'height': '188px',
           'width': '52px',
           'left': '330px'
            });
            $("#sprite").animate({bottom: '2000px'}, 400, 'linear', function () {
            });
        }), 80;
        SpriteVis = false;
        } else {

        //I need to call the "tele_in" function here after a 3 second delay but I'm not sure how to do that.

        }
    });
});

如果用户再次滚动，我将不得不再次摆脱他。所以期望的效果是当页面加载时卡通出现，然后如果用户滚动它消失至少三秒钟并且延迟被重置以便当用户滚动时精灵不存在。当用户完成滚动时，精灵需要重新出现。听起来很讨厌，我知道，但这对我正在进行的项目至关重要。关于如何实现这一目标的任何想法？一如既往，非常感谢您提供的任何帮助。

Answer 1

// Global Var
var SpriteVis;

// Function to make sprite appear.
function tele_in() {
    $("#sprite").animate({bottom: '0px'}, 400, 'linear', function () {

        $("#sprite").css({
           'background-image': 'url(/images/Warp-Sprite.png)',
           'height': '50px',
           'width': '90px',
           'left': '300px',
           'bottom': '80px'
        });

        setTimeout(function () {
            $("#sprite").css({
                'background-image': 'url(/images/test-sprite.png)',
                'height': '120px',
                'width': '96px'
                });
            }, 80);
        });

        SpriteVis = true;

}

// Setup event listener for on scroll event
$(window).scroll(function () {
    if (SpriteVis == true) {  //if Sprite is present on screen, run the animation sequence to make it disappear.
        $("#sprite").css({
           'background-image': 'url(/images/Warp-Sprite.png)',
           'height': '50px',
           'width': '90px',
           'left': '300px',
           'bottom': '80px'
        });
        setTimeout(function () {
            $("#sprite").css({
           'background-image': 'url(/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(); }, 3000);
    }
});

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

jQuery - 延迟 3 秒后从另一个函数调用一个函数

jQuery - call a function from another function after 3 second delay

animation

function

timing

delay