javascript - jQueryでマウスオーバーマウスアウト時のリンクの色を薄くする

Question

jQuery でリンクにマウスを合わせると、フェード トゥ カラー効果が得られるようにしようとしています。

これまでのところ、私は持っています:

$('a').hover(
function () { 
    $(this).animate({ color: '#fff' }, 1000 );
},
function () { 
    $(this).animate({ color: '#000' }, 1000 );
});

これは実際にはうまく機能します。ただし、リンクがナビゲーションであり、互いに近接している場合を想像してください。あるリンクから、その隣のリンクに何度かホバリングしようとした場合。リンクは精神的にフェードインとフェードアウトします。アニメーションが既に発生している場合、イベントが「キューに入れられる」のをどのように停止しますか?

アドバイスをいただければ幸いです。

Answer 1

stopあなたは機能を探しています

$('a').hover(
    function () { 
        $(this).stop().animate({ color: '#fff' }, 1000 );
    },
    function () { 
        $(this).stop().animate({ color: '#000' }, 1000 );
    }
);