jQuery Animation Help
<p>I have the following code:</p>

<pre><code>&lt;div id="container"&gt;

&lt;div class="nameContainer"&gt;
    &lt;p class="daniel"&gt;Daniel&lt;/p&gt;
    &lt;p class="james"&gt;James&lt;/p&gt;
    &lt;p class="david"&gt;David&lt;/p&gt;
    &lt;p class="morrison"&gt;Morrison&lt;/p&gt;
&lt;/div&gt;

&lt;script type="text/javascript"&gt;

    if (!Modernizr.csstransitions) {

        $('.daniel').hover(function() {
         $('.daniel').animate({
            opacity: 0.25,
          }, 1000, function() {
            // Animation complete.
          });
        });

    }

&lt;/script&gt;
</code></pre>

<p>So this should make it so when you hover over the "Daniel" text, it should lower in opacity to 0.25. However, when using IE (because it doesn't support csstransitions, so I had to use modernizr and some jquery to get to work) it just crashes the whole of IE and refuses to do anything. Now if I change the jQuery code to this:</p>

<pre><code>&lt;div id="container"&gt;

&lt;div class="nameContainer"&gt;
    &lt;p class="daniel"&gt;Daniel&lt;/p&gt;
    &lt;p class="james"&gt;James&lt;/p&gt;
    &lt;p class="david"&gt;David&lt;/p&gt;
    &lt;p class="morrison"&gt;Morrison&lt;/p&gt;
&lt;/div&gt;

&lt;script type="text/javascript"&gt;

    if (!Modernizr.csstransitions) {

        $('.nameContainer').hover(function() {
         $('.nameContainer').animate({
            opacity: 0.25,
          }, 1000, function() {
            // Animation complete.
          });
        });

    }

&lt;/script&gt;
</code></pre>

<p>It'll work perfectly.. All the text will change opacity. However this isn't what I want; I want it so when you hover over one word it changes opacity.</p>

<p>Here's a live demo: <a href="http://mozazdesign.co.cc/newlogo2/" rel="nofollow">http://mozazdesign.co.cc/newlogo2/</a></p>

<p>Any help on this would be great.. Thanks!</p>
