2

CSSには、ホバー効果のあるDIVアイテムがいくつかあります。要素にカーソルを合わせると、1つの要素の背景色が別になります。別のアイテムにカーソルを合わせると、前に選択したアイテムにカーソルを合わせずにデフォルトの背景色が表示されます。

jQueryでこれを行うにはどうすればよいですか？背景色をアニメートしたいのですが、別のアイテムにカーソルを合わせるとフェード（アニメート）効果が消えます。ウィンドウタイムアウトで試してみましたが、マウスポインターをいくつかの要素の上にスライドさせた後、すべてがちらつき、バグが発生しています。

これは、マウスオーバーのアニメーション効果に使用したコードです。

$('.entry').mouseover(function() {
 (this).animate({ backgroundColor: "#0F410E" }, { duration: 500, queue: false });
});

jQuery Colorsプラグインがインストールされています;）

4

2 に答える 2

1

あなたはこのようなことをする必要があります：

jsfiddleのコードをフリックしてください。見ていきますが、これを試してみてください。

使用する理由がわからないので、使用しqueue and durationていると思います:)。

それが原因を助けることを願っています。

var items = '.entry'
$(items).hover(function() {
    // Mouseover state
    $(this).animate({ backgroundColor: "#0F410E" }, { duration: 500, queue: false });
}, function() {
    // Mouseout state
    $(this).animate({ backgroundColor: "black" }, { duration: 500, queue: false });
});
于 2012-07-15T22:01:57.930 に答える
1

background-colorjQueryはネイティブに色をアニメーション化しないため、要素をアニメーション化するには、 jQueryColorプラグインを使用する必要があります。

このプラグインは、cssHookjQuery.animate()が2つの色の間でアニメーション化できるようにするをインストールします。

于 2012-07-15T22:02:20.430 に答える