Why doesn't my jquery work when I add <form> tags?
<p>I have a simple form that displays an animation when it opens and closes:</p>

<pre><code>&lt;html&gt;&lt;head&gt;&lt;style type="text/css"&gt;
#contactFormContainer
            {
                width:300px;
                margin-top:15px;
            }
            #contactForm
            {
                margin-top:15px;
                width:300px;
                border:solid 1px #4d3a24;
                display:none;
            }
            #contactForm fieldset
            {
                padding:20px;
                border:none;
            }      
            #contactForm label
            {
                display:block;
            }      
            #contactForm input[type=text]
            {
                display:block;
                border:solid 1px #4d3a24;
                width:100%;
                margin-bottom:10px;
                height:24px;
            }  
            #contactForm textarea
            {
                display:block;
                border:solid 1px #4d3a24;
                width:100%;
                margin-bottom:10px;
            }  
            #contactForm input[type=submit]
            {
                background-color:#4d3a24;
                border:solid 1px #23150c;
                color:#FFFFFF;
                padding:5px;
                cursor:pointer;
                float: right;
            }                
            #contactLink
            {
                height:15px;
                width:218px;
                background-image:url('../images/signup.png');
                cursor:pointer;
            }
            #messageSent
            {
                color:#bc0d1b;
                display:none;
            }
&lt;/style&gt;
&lt;script src="jquery-1.8.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function(){

    $("#contactLink").click(function(){
        if ($("#contactForm").is(":hidden")){
            $("#contactForm").slideDown("slow");
        }else{
            $("#contactForm").slideUp("slow");
        }
    });

});

function closeForm(){
    $("#messageSent").show("slow");
    setTimeout('$("#messageSent").hide();$("#contactForm").slideUp("slow")', 2000);
}
&lt;/script&gt;

&lt;/head&gt;&lt;body&gt;



    &lt;div id="contactFormContainer"&gt;
        &lt;div id="contactLink"&gt;&lt;/div&gt;
        &lt;div id="contactForm"&gt;
            &lt;form action="test2.php" enctype="multipart/form-data" method="post"&gt;
            &lt;fieldset&gt;
                &lt;label for="name"&gt;Name *&lt;/label&gt;
                &lt;input id="name" type="text" name="name" /&gt;
                &lt;label for="email"&gt;Email address *&lt;/label&gt;
                &lt;input id="email" type="text" name="email" /&gt;
                &lt;input id="sendMail" type="submit" name="signupSubmit" /&gt;
                &lt;span id="messageSent"&gt;&lt;/span&gt;
            &lt;/fieldset&gt;
            &lt;/form&gt;
        &lt;/div&gt;
    &lt;/div&gt;



&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>The problem is that if I add <code>&lt;form action="test2.php" enctype="multipart/form-data" method="post"&gt;</code> above the first fieldset - and then close the form... my closing animation no longer works.</p>

<p><strong>TL;DR</strong></p>

<ol>
<li>I click submit and the form closes in a nice annimation</li>
<li>I add a <code>&lt;form&gt;</code> tag so that I can process the POST</li>
<li>The closing animation nolonger works</li>
</ol>

<p>Why, and how can I fix it?</p>
