1

要素をホバリングするときに背景色をアニメーション化しようとしています。

たとえば、ホバーすると背景が赤に変わり、スライドダウンし、マウスが離れるとフェードアウトする div があるとします。

$('div.Item').hover(function () {
  $(this).css('background-color', 'red').slideDown(400);
},
function () {
    $(this).css('background-color', 'transparent').fadeOut(400);
});

これには 2 つの問題があります。SlideDown が機能せず、赤色が表示されるだけです。また、マウスを離すと、要素が完全に消えます (fadeOut が要素自体で機能しており、背景のトランジションでは機能していないためだと思います)。 -色）。

これを達成するのに役立つチュートリアルや誰かがいますか?

4

2 に答える 2

3

背景画像にすることで同じ効果を実現できます。また、チェーンを維持する代わりに .animate を使用して css とアニメーション効果を一緒に変更すると、次のコードが役立ちます。

$('#nav a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
    $(this).stop().animate(
        {backgroundPosition:"(0 250px)"}, 
        {duration:500})
    })
.mouseout(function(){
    $(this).stop().animate(
        {backgroundPosition:"(0 0)"}, 
        {duration:500})
    })

このリンクをチェックして、デモも見てください!

于 2013-05-04T11:26:54.687 に答える