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＆amp; 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>

有什么问题？

另一个小问题 - 有没有办法得到一个布尔值我是否正在滚动一个对象（类似于 - 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上悬停时创建了一个非常基本的不透明示例。如果您有任何疑问请发表评论，我认为您对此解决方案非常满意。

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

1 个答案: