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

Question

I'm trying to run a quick animation on scroll, however I can't get the desired effect to repeat when necessary. I have a little cartoon guy appear on my site when the document is ready:

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

The above code works fine, however I'd like the cartoon guy to disappear on scroll and if the user doesn't scroll for 3 seconds, I want the cartoon guy to re-appear. I can get the cartoon to disappear but I can't get it to come back at all. I'm not sure if it's because I'm not calling the function correctly or if I'm calling it in the wrong place or what but I am totally stumped. Here is the function that gets rid of the cartoon and should call it back:

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.

        }
    });
});

And then I'll have to get rid of him again if the user scrolls again. So the desired effect is that the cartoon appears when the page is loaded, then if the user scrolls it disappears for at least three seconds and the delay gets reset so that the sprite is not present when the user is scrolling. When the user is finished scrolling, the sprite needs to reappear. Sounds obnoxious, I know, but it's crucial to the project I'm working on. Any ideas on how I can accomplish this? As always, any help offered is greatly appreciated.

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