0

3 つのボックスに小さなホバー機能があるとします。カーソルを合わせると、アニメーションが表示され、背景色が変わります。ページが読み込まれると、すでにアニメーション化されている必要があります。別のボックスにカーソルを合わせると、そのボックスは消えて、ホバーされている方だけがアニメーション化されます。

ここにJSFiddleがあります

jQuery:

$(document).ready(function(){

    $('.box').hover(function(){
        $(this).stop().animate({
            backgroundColor: "red"
        }, 800);
    },
    function(){
        $(this).stop().animate({
            backgroundColor: "green"
        }, 800);
    });
});

ページが読み込まれたときに中央のボックスをどのようにアニメーション化できますか。次に、ホバーが通常どおり機能するようにします (これには、通常のアニメーションに戻る中央のボックスが含まれます)。

4

2 に答える 2

0

カスタム クラスを使用します。

$(document).ready(function(){

     $('.box').hover(
    function(){

        $(this).stop().animate({
            backgroundColor: "red"
        }, 800,function(){
             $('.box').removeClass('.animated');
        })
    },
    function(){
        $(this).stop().animate({
            backgroundColor: "green"
        }, 800);

    });

})

CSS:

 .animated { background:red;}

を配置する場所を試すことができますremoveClass。次のような関数を追加するとよい場合があります。

$('.box').one('mouseover',function(e){
   $('.box').removeClass('.animated');
})

1回しか起動しないので、実際にはその方が気に入っていますが、違いはおそらくごくわずかです。関数を最初の の最後から外して、関数が呼び出されるanimate前に行を貼り付けることもできます。animate私の推測では、私が提案した方法が最も滑らかに見えると思います。しかし、すべての方法が機能します。

于 2013-05-23T02:03:35.460 に答える