.hide doesn't work
<p>I am making a jeopardy game. When I click a div I want to do some effect on it. However, I can't even get a simple .hide to work. Any ideas?</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
    &lt;head&gt;
        &lt;title&gt;Jeopardy&lt;/title&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
        &lt;link href="css/bootstrap-responsive.css" rel="stylesheet"&gt;
        &lt;link href="css/bootstrap.css" rel="stylesheet"&gt;        
        &lt;link href="css/customStyles.css" rel="stylesheet"&gt;     
        &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
        &lt;script src="js/flip.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div class ="container"&gt; 
            &lt;div class="row"&gt;   
                &lt;div class="prizeAmount"&gt;                               
                    &lt;div class="span2"&gt;     
                        &lt;h3 id="test"&gt;100&lt;/h3&gt;                          
                    &lt;/div&gt;
                    &lt;div class="span2"&gt;     
                        &lt;h3&gt;100&lt;/h3&gt;                                
                    &lt;/div&gt;  
                    &lt;div class="span2"&gt;     
                        &lt;h3&gt;100&lt;/h3&gt;                                
                    &lt;/div&gt;
                        &lt;div class="span2"&gt;     
                            &lt;h3&gt;100&lt;/h3&gt;                            
                    &lt;/div&gt;
                    &lt;div class="span2"&gt;     
                        &lt;h3&gt;100&lt;/h3&gt;                        
                    &lt;/div&gt;  
                    &lt;div class="span2"&gt;     
                        &lt;h3&gt;100&lt;/h3&gt;    
                    &lt;/div&gt;  
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;&lt;!--close container--&gt;
    &lt;/body&gt;
&lt;/html&gt; 
</code></pre>

<p>javascript</p>

<pre><code>$(function() {    
    $('#span2').click(function() {
        $(this).hide(400);
        /*$('#span2').hide(400);  &lt;--tried this also */
    });
});
</code></pre>

<p>I've used jquery to animate navigation on a site before. Am i missing something obvious?</p>
