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

我有一个非常简单的用于突出显示特定列表项代码：为什么动画不透明在铬中不起作用？

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>

问题是什么？

而另一个小问题 - 有没有办法让一个布尔我是否滚过一个对象（像 - ？isHover()）

来源

2011-07-10 Alon

你可以包含与此一起使用的HTML吗？ – jfriend00

我已更新我的问题... – Alon

三条线上的$ j是多少？当我尝试执行你所拥有的功能时，会出现语法错误。 – jfriend00

我相信，你的动画块应在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。如果您有任何问题，请发表评论，我认为您会对此解决方案感到满意。

来源

2012-11-15 14:07:14 afreeland

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

回答

相关问题