jquery - ホバーしてフリーズしてからアクション

Question

私は 3 つの写真の連絡先ページを持っています。写真にカーソルを合わせると、この写真に関するテキストが別のボックスに表示されます。問題は、マウスをすばやく動かす (1 秒間に 2 つまたは 3 つの写真をホバーする) ことです。すべての説明が乱雑に表示されます。

画像にカーソルを合わせたときに、ポインターが 1 秒間フリーズしたままになっている場合にのみ、テキストが表示されるようにする方法はありますか?

jQコードは次のとおりです。

$('#pic1').mouseenter(function() {
myTimeout = setTimeout(function() {
if (hidden2.hasClass("active") ){hidden2.fadeOut(200).removeClass('active').css('display','none');}
if (hidden3.hasClass("active") ){hidden3.fadeOut(200).removeClass('active').css('display','none');}

    hidden1.fadeIn(900).addClass('active');
}, 1500);
    });

$('#pic2').mouseenter(function() {
myTimeout = setTimeout(function() {
if (hidden1.hasClass("active") ){hidden1.fadeOut(200).removeClass('active').css('display','none');}
if (hidden3.hasClass("active") ){hidden3.fadeOut(200).removeClass('active').css('display','none');}

    hidden2.fadeIn(900).addClass('active');
}, 1500);
    });

$('#pic3').mouseenter(function() {
myTimeout = setTimeout(function() {
    if (hidden1.hasClass("active") ){hidden1.fadeOut(200).removeClass('active').css('display','none');}
    if (hidden2.hasClass("active") ){hidden2.fadeOut(200).removeClass('active').css('display','none');}

    hidden3.fadeIn(900).addClass('active');
}, 1500);
    });