javascript - 为什么动画不透明度在 chrome 中不起作用？

Question

我有这个非常简单的代码来突出显示特定的列表项:

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');
    }
);

最大的问题是它在 chrome 中不起作用(在 firefox 4 和 IE9 中效果很好)

网站是http://www.alonbt.com

HTML 是

<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>

问题是什么？

还有另一个小问题 - 是否有办法获取 bool 值，判断我是否在对象上滚动(类似于 - isHover()？)

Answer 1

我认为您的动画片应该用 CSS 来完成。我没有看到 Chrome 通过 CSS 执行此操作时出现任何问题，而且性能非常惊人。我们检查了我们的门户并诊断出几个 JavaScript 性能问题，这些问题通过将此内容和小动画等内容移至 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;
}

请检查 jsFiddle 以查看它的工作...调整时间以满足您的需要(s 或 ms)

我创建了一个悬停在 jsFiddle here is the link 上的不透明度的非常基本的示例.如果您有任何问题，请发表评论，我认为您会对这个解决方案感到非常满意。