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秒延迟后从另一个函数调用一个函数

1 个答案: