Load order of jquery animations
<p>I am just starting a jQuery tutorial and I have a basic question on the load order of jQuery animations.</p>

<p>Clicking on a link causes both an alert and a hide animation to appear when I use the following HTML code:</p>

<pre><code> &lt;body&gt;
   &lt;a href="http://jquery.com/"&gt;jQuery&lt;/a&gt;
   &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"&gt;&lt;/script&gt;
   &lt;script&gt;
     $(document).ready(function(){
       $("a").click(function(event){
         alert("As you can see, the link no longer took you to jquery.com");
         event.preventDefault();
       });
       $("a").click(function(event){
         event.preventDefault();
         $(this).hide("slow");
       });
     });
   &lt;/script&gt;
 &lt;/body&gt;
</code></pre>

<p>However, when I take the second click function out of the document.ready function so that the code looks as it does below, the popup appears and the text disappears, but the hide animation does not happen.  </p>

<pre><code> &lt;!DOCTYPE html&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
   &lt;meta charset="utf-8"&gt;
   &lt;title&gt;jQuery demo&lt;/title&gt;
   &lt;style&gt;
    a.test { font-weight: bold; }
  &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
   &lt;a href="http://jquery.com/"&gt;jQuery&lt;/a&gt;
   &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"&gt;&lt;/script&gt;
   &lt;script&gt;
     $(document).ready(function(){
       $("a").click(function(event){
         alert("As you can see, the link no longer took you to jquery.com");
         event.preventDefault();
       });
     });
     $("a").click(function(event){
       event.preventDefault();
       $(this).hide("slow");
     });
   &lt;/script&gt;
 &lt;/body&gt;
 &lt;/html&gt;
</code></pre>

<p>Can anyone explain why the hide animation shows up only for the first example and not the second?</p>
