Gecikmeli Javascript üzerinde gezinme eylemi

Question

Sitemde, kendisine atanan jquery hover eylemi olan bir resmim var. Ancak, yanlışlıkla bu alan üzerinde fareyi kullanmak kolaydır ve eğer bir kereden fazla yaparsanız, vurgulu, görününceye kadar kaybolup görünecek, görünecek, vb. Görünene kadar devam eder. Bunu yapmak için bir kaç saniyeliğine durmadan harekete geçmenin bir yolu var mı? Sadece eylemi ertelemeyi istemiyorum, çünkü her mouseover için hala geçerli olacaktı, fareyi birkaç saniyeliğine görmediğiniz sürece sansürlemenin bir yolu olup olmadığını görmek istiyorum. Bugüne kadar

Senaryo:

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

Answer 1

Harekete başlatmak için setTimeout kullanıp mouseout olaya clearTimeout çağıran bir işlev bağlamak olabilir: bunun için bir eklenti kullanabilirsiniz

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

Ya da, hoverintent gibi.

Answer 2

Önceki animasyonu iptal etmek için animasyondan önce .stop() kullanın. Aradığın şeyin bu olduğuna inanıyorum ve şimdiki problemini çözeceğim. hiçbir şey olmuyor böylece vurgulu zamanlayıcı yangınları önce terk ederse, sonra böyle bir zamanda belirli bir miktar süpürdü ve kontrol edilinceye kadar Sen vurgulu eylemi ateş için bir zamanlayıcı kullanabilirsiniz

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

Answer 3

zamanlayıcıyı temizlemek

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

Not: animasyonlar yığmak asla yüzden de Animasyonunuza .stop(true) eklendi yalnızca kısa bir zaman periyodunu süpürdü eğer.