Why does animate opacity not work in chrome?

Question

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 href="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()?)

What is the $j on three lines? Makes a syntax error when I try to exec what you have. — jfriend00, Jul 10 '11 at 17:07
When I change $j to $, it seems to be working here: http://jsfiddle.net/jfriend00/eWuf2/ — jfriend00, Jul 10 '11 at 17:09
@jfriend00: I guess that's just jQuery. If that was the problem, it would not be possible that it works seamlessly on IE/Firefox. — pimvdb, Jul 10 '11 at 17:10
Unless Alon has reassigned the jQuery symbol and didn't tell us. — jfriend00, Jul 10 '11 at 17:11
@alon there is a ton of css for that section of html. As you can see from @jfriend's fiddle, it works without the css. I would remove css rules one by one until I find the one causing the issue. Once it's narrowed down you may be able to find a solution. — James Montagne, Jul 10 '11 at 17:22
It's like chrome doesn't know what is "opacity: 0.2" - Are there other ways to change the opacity? — Alon, Jul 10 '11 at 17:40
Even when I write $highlights.not(this).parent().animate({opacity: 0.99}, 200); it does the same error in chrome.. — Alon, Jul 10 '11 at 17:45
The answer for your second question is here: http://stackoverflow.com/questions/1273566/how-do-i-check-if-the-mouse-is-over-an-element-in-jquery — unclenorton, Aug 22 '11 at 17:55
Please see [this question](http://stackoverflow.com/questions/833883/weird-chrome-prototype-jquery-conflict) (and answer) - it should explain a little bit about why your code works in other browsers. (http://stackoverflow.com/questions/833883/weird-chrome-prototype-jquery-conflict) — regan_leah, Nov 14 '12 at 17:05

score 1 · Answer 1 · answered Nov 15 '12 at 14:07

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.

Why does animate opacity not work in chrome?

1 Answers1