settimeout之后的jQuery运行功能 [英] jquery run function after settimeout

问题描述

我有一个运行得很好的动画，但是现在我试图通过淡出文本然后运行另一个功能来反转该动画. 加载此页面后，将运行以下内容...

I have an animation that runs great, but now I'm trying to reverse this animation by fading out the text and then running another function. Upon this page being loaded the following runs...

 $(document).ready(function () {

      dream();
      setTimeout(runul(), 8000, function() {showVideo()});

    });

dream功能在身体背景上产生气泡.

The dream function creates bubbles on the body background.

 function dream() {
        //calculating random color of dream
        if (animation_stopped) return;
        var color = 'rgb(' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ')';

        //calculating random X position
        var x = Math.floor(Math.random() * $(window).width());

        //calculating random Y position
        var y = Math.floor(Math.random() * $(window).height());

        //creating the dream and hide
        drawingpix = $('<span>').attr({ class: 'drawingpix' }).hide();

        //appending it to body
        $(document.body).append(drawingpix);

        //styling dream.. filling colors.. positioning.. showing.. growing..fading
        drawingpix.css({
            'background-color': color,
            'border-radius': '100px',
            '-moz-border-radius': '100px',
            '-webkit-border-radius': '100px',
            top: y - 14,    //offsets
            left: x - 14 //offsets
        }).show().animate({
            height: '500px',
            width: '500px',
            'border-radius': '500px',
            '-moz-border-radius': '500px',
            '-webkit-border-radius': '500px',
            opacity: 0.1,
            top: y - 250,    //offsets
            left: x - 250
        }, 3000).fadeOut(2000);

        //Every dream's end starts a new dream
         window.setTimeout('dream()', 200);
    }

在运行Dream函数的同时，我运行runul()函数，该函数开始键入文本.

While the dream function is running, I run the runul() function, which starts typing text.

 function runul() {
        jQuery("#ticker").ticker({
            cursorList: " ",
            rate: 50,
            delay: 18000
        }).trigger("play").trigger("stop");

        // Trigger events
        jQuery(".stop").click(function () {
            jQuery("#ticker").trigger("stop");
            return false;
        });

        jQuery(".play").click(function () {
            jQuery("#ticker").trigger("play");
            return false;
        });

    }

当runul()动画完成时，我想运行showVideo函数.我希望此函数淡出键入的文本，然后淡入包裹在div中的iframe.

When the runul() animation is completed I would like to run the showVideo function. I want this function to fadeout the typed text and then fadein the iframe wrapped in a div.

 function showVideo() {
        $('#divFade').fadeOut(3000);
        animation_stopped = true;
        $(typetext).css('color', 'black');
        $("body").animate({ backgroundColor: "#ffffff" }, 3000);
        $('#divVideos').fadeIn('slow');
       // Animation complete.
        $("#iVideos").prop('src', 'Videos/Quick Start Intro_player.html');
        return false;
      };

如何在runul()完成后让showVideo运行?

How can I get the showVideo to run after the runul() is completed?

非常感谢您的帮助

推荐答案

您应将'showVideo'作为回调函数传递

You should pass 'showVideo' as a callback function:

setTimeout( function() {runul(showVideo)},8000);

function runul(callback) {
        jQuery("#ticker").ticker({
            cursorList: " ",
            rate: 50,
            delay: 18000
        }).trigger("play").trigger("stop");

        // Trigger events
        jQuery(".stop").click(function () {
            jQuery("#ticker").trigger("stop");
            return false;
        });

        jQuery(".play").click(function () {
            jQuery("#ticker").trigger("play");
            return false;
        });

        callback();

    }

您还可以使用jquery 延期，具体来说，何时函数

You can also Use jquery defferred and in specific, the when function

这篇关于settimeout之后的jQuery运行功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！