Sheri Trager

How do I run this jQuery function after another function completes?

15 Nov 2012
Firefox 16
15 Nov 2012 | Windows | Firefox 16


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 () {
 setTimeout(runul(), 8000, function() {showVideo()});

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 = $('').attr({ class: 'drawingpix' }).hide();
//appending it to body
//styling dream.. filling colors.. positioning.. showing.. growing..fading
 'background-color': color,
 'border-radius': '100px',
 '-moz-border-radius': '100px',
 '-webkit-border-radius': '100px',
 top: y - 14, //offsets
 left: x - 14 //offsets
 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);

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

function runul() {
 cursorList: " ",
 rate: 50,
 delay: 18000
// Trigger events
 jQuery(".stop").click(function () {
 return false;
jQuery(".play").click(function () {
 return false;

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() {
 animation_stopped = true;
 $(typetext).css('color', 'black');
 $("body").animate({ backgroundColor: "#ffffff" }, 3000);
 // Animation complete.
 $("#iVideos").prop('src', 'Videos/Quick Start Intro_player.html');
 return false;

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

Thanks so much for your help