1

それぞれが段落のタイトルである 4 つの DIV のセットがあります。各 DIV をホバーで展開して短い段落を表示し、マウスアウトで元に戻すようにします。jQuery は正常に機能しています。唯一の問題は、カーソルを 4 つの DIV の上で数回すばやく前後にトレースすると、関数が壊れているように見えることです。

それが行うことは、識別可能なパターンなしで、さまざまな DIV をランダムに拡大および縮小するだけです。

    $('#iam_writer').hover(function(){
        $(this).animate({'height' : '120px'}, 'slow');
        $(this).on('mouseleave',function(){
            $(this).animate({'height' : '25px'}, 'fast');
        });                                     
    });     
    $('#iam_social').hover(function(){
        $(this).animate({'height' : '135px'}, 'slow');
        $(this).on('mouseleave',function(){
            $(this).animate({'height' : '25px'}, 'fast');
        });
    });
    $('#iam_creative').hover(function(){
        $(this).animate({'height' : '135px'}, 'slow');
        $(this).on('mouseleave',function(){
            $(this).animate({'height' : '25px'}, 'fast');
        });
    });
    $('#iam_strategic').hover(function(){
        $(this).animate({'height' : '140px'}, 'slow');
        $(this).on('mouseleave',function(){
            $(this).animate({'height' : '30px'}, 'fast');
        });
     });

おそらくこれを達成するためのより良い方法がありますか？

4

1 に答える 1

1

mouseleaveホバーするたびにイベント をバインドしています。.hoverまた、mouseenter 用の関数と mouseleave 用の関数の 2 つの引数を取るため、次のように記述できます。

$('#iam_writer').hover(function(){
    $(this).stop().animate({'height' : '120px'}, 'slow');
}, function () { 
    $(this).stop().animate({'height' : '25px'}, 'fast');
});

また、別のアニメーションがトリガーされた場合に現在のアニメーションが停止するように追加しまし.stopた。これは、要素にすばやく出入りするときに発生します。

于 2013-02-23T02:24:19.890 に答える