Delay Javascript Hover Aktion

Question

Ich habe ein Bild auf meiner Website, die eine jquery Hover-Aktion zugewiesen hat. Aber es ist leicht, versehentlich über diesen Bereich zu mäuschen, und wenn Sie es mehr als einmal tun, erscheint der Schwebeflug immer wieder, verschwindet, erscheint usw., bis er einmal angezeigt wird und verschwindet, sobald Sie ihn überflogen haben. Gibt es eine Möglichkeit, es so zu machen, dass die Aktion nicht ausgelöst wird, außer du schwebst für ein paar Sekunden? Ich möchte die Aktion nicht einfach verzögern, weil es immer noch bei jedem Mouseover passieren würde. Ich möchte sehen, ob es einen Weg gibt, den der Mouseover nicht zählt, es sei denn, du bist für ein paar Sekunden auf dem Bild.

Script so weit:

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

Answer 1

Sie setTimeout verwenden könnte die Aktion und binden, um eine Funktion aufrufen clearTimeout auf dem mouseout Ereignis zu starten:

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

Oder Sie könnten ein Plugin für das verwenden, wie hoverintent.

Answer 2

Verwenden Sie eine .stop() vor dem Animieren, um die vorherige Animation abzubrechen. Ich glaube, das ist, was Sie suchen, und wird Ihr aktuelles Problem lösen.

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

Answer 3

Sie einen Timer verwenden, können nicht die Hover-Aktion zu schießen, bis Sie eine bestimmte Menge an Zeit wie dieser, und dann schwebte habe, wenn der Hover, bevor der Timer Feuer verlässt, deaktivieren Sie den Timer so passiert nichts wenn Sie schwebte nur eine kurze Zeit:

$("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); 
    } 
}); 

Hinweis: ich habe auch .stop(true) auf Ihre Animation so Animationen nie anhäufen.