2011-12-22 18 views
8

Bu araç ipucu koduna zaman aşımı eklemek istiyorum, böylece yalnızca farenin bir sürenin üzerine değil, bir süre sonra üzerine gelmesi gerekiyor ... setTimeout() eklemeye çalıştım ama nasıl kullanacağımı anlayamadım clearTimeout(), bu yüzden araç ipucu mouseout'ta saklanmıyor. Yardım edebilir misin? jQuery setTimeout

// ----------------------------------------------- 
// TOOLTIP MOUSE HOVER 
// ----------------------------------------------- 
function mcTooltip() { 
    $('.mcTxb').mousemove(function(e) { 
     var mcHoverText = $(this).attr('alt'); 
     var mcTooltip = $('.mcTooltip'); 
     $(mcTooltip).text(mcHoverText).show('fast'); 
     $(mcTooltip).css('top', e.clientY + 10).css('left', e.clientX + 10); 
    }).mouseout(function() { 
     var mcTooltip = $('.mcTooltip'); 
     $(mcTooltip).hide('fast'); 
    }); 
} 
mcTooltip(); 

bu çalıştı:

// ----------------------------------------------- 
// TOOLTIP MOUSE HOVER 
// ----------------------------------------------- 
function mcTooltip() { 
    $('.mcTxb').mousemove(function(e) { 
     var mcHoverText = $(this).attr('alt'); 
     var mcTooltip = $('.mcTooltip'); 
     setTimeOut(function(){ 
      $(mcTooltip).text(mcHoverText).show('fast'); 
     }, 300); 
     $(mcTooltip).css('top', e.clientY + 10).css('left', e.clientX + 10); 
    }).mouseout(function() { 
     var mcTooltip = $('.mcTooltip'); 
     $(mcTooltip).hide('fast'); 
    }); 
} 
mcTooltip(); 
+0

Neden "mouseout" geri aramayı kaldırmıyoruz? –

+0

Bize 'setTimeout'/'clearTimeout' kullanma girişiminizi gösterin. –

cevap

13

, size ipucu görünümünü erteleme .delay() kullanabilirsiniz: Mevcut herhangi gecikme veya animasyonlar iptal etmek .stop kullanın sizin mouseout fonksiyonunda

$(mcTooltip).text(mcHoverText).delay(1000).show('fast'); 

ve ardından araç ipucunu gizlemek :

$(mcTooltip).stop(true).hide('fast'); 
2

Bir seçenek istediğini gerçekleştirmek için hoverIntent eklenti kullanmaktır. Eğer animasyonlar kullanıyorsanız gibi

0
  1. Kullanım hover() yerine, daha az kod (ve bu, IMO her zaman iyidir).

böylece gibisin: mouseover elemanı ve olmayacak olursa olsun zaman

function mcToolTip() { 
    $(".mcTxb").hover(function(){ 
     // mouseover stuff here 
     $("element").delay(3000).show(); // 3 second delay, then show 
    }, function(){ 
     // mouseout stuff here 
    }); 
} 
4
var my_timer; 
$('.mcTxb').hover(
    function() { 
     my_timer = setTimeout(function() { 
      //do work here 
     }, 500); 
    }, 
    function() { 
     clearTimeout(my_timer); 
    } 
); 

Bu ne yapmadan önce yarım saniye bekleyecek eğer yarısında sen mouseout ikinci .

0

Bu soru eskidir, ancak başkaları için yanıtladığımı düşündüm. Zaman aşımının çalışmadığı ana sebep "setTimeOut" durumundaydı. Deve, Out bölümünü kıramazsın. Onun "setTimeout".

0

setTimeout Mouseover veya vurgulu çalışmaz edilir. .delay() işlevini kullanmak güvenlidir.

setTimeout(function(){ 
    $(mcTooltip).text(mcHoverText).show('fast'); 
}, 300); 

// use this instead. 

$(mcTooltip).text(mcHoverText).delay(3000).show('fast'); 
İlgili konular