Ritardo evento jquery hover?

Vorrei ritardare un evento di hover in jQuery. Sto leggendo da un file quando l’utente passa sopra un link o un’etichetta. Non voglio che questo evento si verifichi immediatamente nel caso in cui l’utente stia semplicemente spostando il mouse sullo schermo. C’è un modo per ritardare la sparatoria dell’evento?

Grazie.

Codice di esempio:

$(function() { $('#container a').hover(function() { $('
').load('ReadTextFileX.aspx', {filename:'file.txt'}, function() { $(this).appendTo('#info'); } ); }, function() { $('#info').remove(); } }); });

AGGIORNAMENTO: (14/01/09) Dopo aver aggiunto il plugin HoverIntent, il codice precedente è stato modificato come segue per implementarlo. Molto semplice da implementare.

 $(function() { hiConfig = { sensitivity: 3, // number = sensitivity threshold (must be 1 or higher) interval: 200, // number = milliseconds for onMouseOver polling interval timeout: 200, // number = milliseconds delay before onMouseOut over: function() { $('
').load('ReadTextFileX.aspx', {filename:'file.txt'}, function() { $(this).appendTo('#info'); } ); }, // function = onMouseOver callback (REQUIRED) out: function() { $('#info').remove(); } // function = onMouseOut callback (REQUIRED) } $('#container a').hoverIntent(hiConfig) }

Usa il plugin hoverIntent per jquery: http://cherne.net/brian/resources/jquery.hoverIntent.html

È assolutamente perfetto per quello che descrivi e l’ho usato su quasi tutti i progetti che richiedevano l’triggerszione del mouseover sui menu, ecc …

C’è un approccio a questo approccio, alcune interfacce sono prive di uno stato “hover”, ad es. browser mobili come il safari sull’iPhone. Potresti hide una parte importante dell’interfaccia o della navigazione senza alcun modo di aprirla su tale dispositivo. Si potrebbe aggirare questo con CSS specifico del dispositivo.

Devi controllare un timer al passaggio del mouse. Se non esiste (cioè questo è il primo hover), crealo. Se esiste (cioè questo non è il primo hover), uccidilo e riavvialo. Imposta il payload del timer sul tuo codice.

 $(function() { var timer; $('#container a').hover(function() { if(timer) { clearTimeout(timer); timer = null } timer = setTimeout(function() { $('
').load('ReadTextFileX.aspx', {filename:'file.txt'}, function() { $(this).appendTo('#info'); } ); }, 500) }, // mouse out }); });

Scommetto che jQuery ha una funzione che avvolge tutto questo per te.

Modifica : Ah sì, plugin jQuery in soccorso

Totalmente d’accordo che hoverIntent è la soluzione migliore, ma se ti capita di essere uno sfortunato zoticone che lavora su un sito web con un lungo e prolungato processo di approvazione dei plugin jQuery, ecco una soluzione rapida e sporca che ha funzionato bene per me:

 $('li.contracted').hover(function () { var expanding = $(this); var timer = window.setTimeout(function () { expanding.data('timerid', null); ... do stuff }, 300); //store ID of newly created timer in DOM object expanding.data('timerid', timer); }, function () { var timerid = $(this).data('timerid'); if (timerid != null) { //mouse out, didn't timeout. Kill previously started timer window.clearTimeout(timerid); } }); 

Questo è solo per espandere un

  • se il mouse è stato su di esso per più di 300 ms.
  • È ansible utilizzare una chiamata setTimeout () con clearTimeout () sull’evento mouseout.

    Nel 2016 la soluzione di Crescent Fresh non ha funzionato come previsto per me, quindi mi sono inventato questo:

     $(selector).hover(function() { hovered = true; setTimeout(function() { if(hovered) { //do stuff } }, 300); //you can pass references as 3rd, 4th etc. arguments after the delay }, function() { hovered = false; }); 

    La mia soluzione è facile. Ritarda il menu aperto se l’utente tiene premuto mouseenter su obj su 300 ms:

     var sleep = 0; $('#category li').mouseenter(function() { sleep = 1; $('#category li').mouseleave(function() { sleep = 0; }); var ob = $(this); setTimeout(function() { if(sleep) { // [...] Example: $('#'+ob.attr('rel')).show(); } }, 300); });