Why does animate opacity not work in chrome?

I have this very simple code for highlighting a specific list item:

var $highlights = $j("div.ab-highlights ul li a");
$highlights.hover(
    function () {
        $j(this).children().addClass('active'); 
        $j(this).parent().animate({opacity: 1}, 200);
        $highlights.not(this).parent().animate({opacity: 0.2}, 200);    
    }, 
    function () {
        $j(this).children().removeClass('active');
    }
);

the BIG problem is that it does not work in chrome (in firefox 4 & IE9 it works great)

the site is http://www.alonbt.com

the HTML is

<div class="ab-highlights">
    <ul>
        <li class="mansfred"><a href="http://alonbt.com/musical-biography/"><span>Musical Biography</span></a></li>
        <li class="museek"><a href="http://alonbt.com/music-visualization-project/"><span>Music Visulisation Project</span></a></li>
        <li class="ripui-sini"><a href="http://alonbt.com/chinese-acupuncture/"><span>Chinese Medicine Website</span></a></li>
        <li class="gay-guide"><a hr开发者_如何学Goef="http://alonbt.com/the-gay-guide/"><span>The Gay Guide</span></a></li>
        <li class="philosophy"><a href="http://alonbt.com/perhaps-magazine/"><span>Magazine Design</span></a></li>
        <li class="taxi"><a href="http://alonbt.com/5-facts-about-the-israeli-taxi/"><span>5 Facts About Taxis</span></a></li>

    </ul>
</div>

What is the problem?

And another small question - is there a way to get a boolean whether I am rolling over an object (something like - isHover()?)

---

I believe that your animation piece should be done in CSS. I have not seen any issues in Chrome doing it via CSS and performance is amazing. We went through our portal and diagnosed several JavaScript performance issues that were solved by moving things such as this and minor animation to CSS.

<ul class="myClass">
    <li>One Item</li>
    <li>Two Item</li>
    <li>Three Item</li>
    <li>Four Item</li>
</ul>
​
.myClass li
{
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    filter: alpha(opacity=20);
    opacity:.2;
    -webkit-transition:opacity 1s linear;
    -moz-transition:opacity 1s linear;
    -ms-transition:opacity 1s linear;
    -0-transition:opacity 1s linear;
     transition:opacity 1s linear;
    cursor:point;
}
.myClass li:hover
{
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity:1;
}

Please check the jsFiddle to see it work...adjust the timing to meet your needs (s or ms)

I created a very basic example of a opacity on hover over on jsFiddle here is the link. If you have questions please comment, I think you will be very happy with this solution.