title: jquery run function after settimeout
body: <p>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...</p>
  
  <pre><code> $(document).ready(function () {
  
        dream();
        setTimeout(runul(), 8000, function() {showVideo()});
  
      });
  </code></pre>
  
  <p>The dream function creates bubbles on the body background.</p>
  
  <pre><code> 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 = $('&lt;span&gt;').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);
      }
  </code></pre>
  
  <p>While the dream function is running, I run the runul() function, which starts typing text.</p>
  
  <pre><code> 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;
          });
  
      }
  </code></pre>
  
  <p>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.</p>
  
  <pre><code> 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;
        };
  </code></pre>
  
  <p>How can I get the showVideo to run after the runul() is completed?</p>
  
  <p>Thanks so much for your help</p>