title: Make jquery function run on page load
body: <p>I have a jquery function to change the opacity of an image on mouse hover to produce a pulsating effect, but I would like to change it so that the image pulsates as soon as the page loads, removing the mouse hover elements mouse over and mouse out.</p>
  
  <p>Here is the code I have</p>
  
  <pre><code>    (function($) {
          $(document).ready(function() {
              window.pulse_image = null;
              window.pulse_continue_loop = false;
  
              $('.pulse_image').mouseover(function() {
              // User is hovering over the image.
              window.pulse_continue_loop = true;
              window.pulse_image = $(this);
  
              PulseAnimation(); // start the loop
          }).mouseout(function() {
              window.pulse_continue_loop = false;
              window.pulse_image.stop();
              window.pulse_image.css('opacity',1);
          });
      });
  })(jQuery);
  
  
  function PulseAnimation()
  {
      var minOpacity = .33;
      var fadeOutDuration = 650;
      var fadeInDuration = 650;
  
      window.pulse_image.animate({
          opacity: minOpacity
      }, fadeOutDuration, function() {
          window.pulse_image.animate({
              opacity: 1
          }, fadeInDuration, function() {
              if(window.pulse_continue_loop) {
                  PulseAnimation();
              }
          })
      });
  }
  </code></pre>
  
  <p>From 
  <a href="http://www.infinitywebcreations.com/2011/01/how-to-create-a-throbbingpulsing-image-effect-with-jquery/">http://www.infinitywebcreations.com/2011/01/how-to-create-a-throbbingpulsing-image-effect-with-jquery/</a></p>