Hi,

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

});

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

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

}

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

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

Thanks so much for your help