9

私のサイトには、jquery hover アクションが割り当てられた画像があります。ただし、誤ってその領域にマウスを移動するのは簡単です。2 回以上行うと、ホバーが表示され、表示され、表示され、マウスがその上に移動するたびに 1 回表示され、表示されなくなります。数秒間ホバーしないとアクションが起動しないようにする方法はありますか? マウスオーバーごとにアクションが発生するため、アクションを遅らせたくありません。数秒間画像上にいない限り、マウスオーバーがカウントされない方法があるかどうかを確認したいと思います。

これまでのスクリプト:

$("img.badge").hover(
function() {
  $("h3.better").animate({"left": "125px"}, 1200);
},
function() {
  $("h3.better").animate({"left": "-500px"}, 800);
});
4

3 に答える 3

13

アクションを起動し、イベントでsetTimeout呼び出す関数をバインドするために使用できます。clearTimeoutmouseout

$('img.badge').hover(function(){
    window.mytimeout = setTimeout(function(){
        $("h3.better").animate({"left": "125px"}, 1200);
    }, 2000);
}, function(){
    clearTimeout(window.mytimeout);    
});

または、 hoverintentなどのプラグインを使用することもできます。

于 2013-02-11T18:26:39.680 に答える
1

before animateを使用して、.stop()前のアニメーションをキャンセルします。これがあなたが探しているものであり、現在の問題を解決すると信じています。

$("img.badge").hover(
function() {
  $("h3.better").stop().animate({"left": "125px"}, 1200);
},
function() {
  $("h3.better").stop().animate({"left": "-500px"}, 800);
});
于 2013-02-11T18:27:41.320 に答える
0

タイマーを使用して、このように一定時間ホバリングするまでホバー アクションを起動しないようにすることができます。その後、タイマーが起動する前にホバーが離れた場合は、タイマーをクリアして、ホバリングしただけの場合は何も起こりません。短期間:

$("img.badge").hover(function() {
    var timer = $(this).data("hover");
    // if no timer set, set one otherwise if timer is already set, do nothing
    if (!timer) {
        // set timer that will fire the hover action after 2 seconds
        timer = setTimeout(function() {
            $("h3.better").stop(true).animate({"left": "125px"}, 1200);
            $(this).data("hover", null);
        }, 2000);
        // save timer
        $(this).data("hover", timer);
    }
}, function() {
    var timer = $(this).data("hover");
    if (timer) {
        clearTimeout(timer);
        $(this).data("hover", null);
    } else {
        // probably would be better to make this an absolute position rather
        // than a relative position
        $("h3.better").stop(true).animate({"left": "-500px"}, 800);
    }
});

注：.stop(true)アニメーションが重ならないように、アニメーションにも追加しました。

于 2013-02-11T18:29:54.553 に答える