2011-07-10 8 views
4

私は特定のリスト項目を強調表示するために、この非常に簡単なコードを持っている:アニメーションの不透明度がクロームで機能しないのはなぜですか?

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

大きな問題は、それがクロムでは動作しないということである(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())は

+0

これに伴うHTMLを含めることはできますか? – jfriend00

+0

私は質問を更新しました... – Alon

+0

3行で$ jとは何ですか?あなたが持っているものをexecしようとすると構文エラーになります。 – jfriend00

答えて

1

私はあなたのアニメーション作品は、CSSで行うべきであると考えています。私はクロムでCSSを介してそれをやっている問題を見ていないとパフォーマンスが素晴らしいです。私たちはポータルに入り、このようなマイナーなアニメーションをCSSに移すことで解決されたいくつかのJavaScriptパフォーマンスの問題を診断しました。

<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はそれが動作を確認し、私はjsFiddle here is the linkにホバーで不透明度の非常に基本的な例を超える作成し、ニーズ(秒またはミリ秒)

を満たすために、タイミングを調整してください。ご意見がありましたら、このソリューションに非常に満足していただけると思います。

関連する問題