0

シンプルな水平メニューがあります。私が欲しいのは、白から灰色にアニメーション化するためにホバリングしているli aの背景だけです。Firefox と IE ではすべて正常に動作しますが、Chrome では動作しません。理由は何でしょうか？

コード：

<script type="text/javascript">
$(document).ready(function(){
    $("#nav ul li a").hover(function() {
        $(this).stop().animate({ backgroundColor: '#E5E5E5' }, 500);
    },function(){
          $(this).stop().animate({backgroundColor: '#FFF' }, 500);
     })
})
</script>

そしてHTML：

<div id="nav">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Estimator</a></li>
        <li><a href="#">Products & Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div><!--end of nav div-->

私はこれが本当に簡単なことであることを知っています。しかし、私が言ったように、Chrome では動作しません。

修繕：

プラグインだけ変えました。私が言ったように、jQuery を使って何かをするのは久しぶりです。jQuery UI のことをすっかり忘れていました。みんな、ありがとう！

4

1 に答える 1

3

私はそれを試しました (ここ) が、どのブラウザーでも機能しません。

jQuery はそのままではカラー アニメーションをサポートしていないため、これは予想される結果です。jQuery UI（これは巨大です）またはこのようなプラグインを使用する必要があります

別の方法として、CSS3 トランジションでこれを行うことができます - DEMO

a {
    -webkit-transition: background-color .5s;
       -moz-transition: background-color .5s;
        -ms-transition: background-color .5s;
         -o-transition: background-color .5s;
            transition: background-color .5s;
}  

a:hover {
    background-color: #5f5f5f;
}
​
于 2012-11-10T21:54:46.363 に答える