Animating Opacity of an image using mouseover and mouseleave events
<p>I have 2 images inside a  with opacity set to 0.2 :</p>

<p>When I hover over the div, I want to bring the opacity to 1 for the 2 images, here is the code :</p>

<pre><code>$(".comment-thread").live("mouseover", function () {


    $(this).find('.comment-rating-down').animate({ opacity: 1 }, 500);
    $(this).find('.comment-rating-up').animate({ opacity: 1 }, 500);
</code></pre>

<p>});</p>

<p>$(".comment-thread").live("mouseout", function () {</p>

<pre><code>    $(this).find('.comment-rating-down').animate({ opacity: 0.2 }, 500);
    $(this).find('.comment-rating-up').animate({ opacity: 0.2 }, 500);
</code></pre>

<p>});</p>

<p>What happens is when I hover over the div, the 2 buttons blinks like 4 times and more as if it is buffering the animation.</p>

<p>Is there a better technique ?</p>

<p>Thanks</p>
