What's wrong with my javascript?
<p>I have this code: <a href="http://jsfiddle.net/ZYZLT/2/" rel="nofollow">http://jsfiddle.net/ZYZLT/2/</a></p>

<p>but when I put it live online <a href="http://bellated.us.lt/supersized/index.html" rel="nofollow">http://bellated.us.lt/supersized/index.html</a> it doesnt work. What I am missing here?</p>

<p>My code:</p>

<p>html:</p>

<pre><code>&lt;div class="ball"&gt;Demo&lt;/div&gt;
</code></pre>

<p>css:</p>

<pre><code>.ball{
    -webkit-border-radius:250px;
    -moz-border-radius: 250px;
    border-radius: 250px;
    background: green;
    width : 200px;
    height : 200px;
    text-align: center;
    line-height: 200px;
}
</code></pre>

<p>javascript:</p>

<pre><code>&lt;script type="text/javascript"&gt;
$('.ball').hover(function(){
    $(this).animate({width : '250px', height : '250px', lineHeight : '250px'}, 300);
        }, 
 function(){
     $(this).stop().animate({width : '200px', height : '200px', lineHeight : '200px'}, 200)
         });
&lt;/script&gt;
</code></pre>
