2009-11-03 4 views
5

Vorrei attivare una funzione .mouseover solo se il mouse si appoggia sull'elemento "trigger" per una durata predeterminata (ad esempio 500 millisecondi).jQuery attiva una funzione mouseover solo se il mouse trattiene l'elemento

E.g.

$('.featured').mouseover(function() { 
     $('.feat-txt').fadeOut("fast"); 
    }); 

Solo se il mouse viene posizionato sopra l'elemento .featured per il periodo di almeno 500 millisecondi, la funzione può aprire .feat-TXT permette FadeOut. Un semplice passaggio del mouse (solo un movimento rapido) su quell'elemento non attiva la funzione.

Qualche suggerimento su come farlo?

risposta

1

fare in questo modo:

  • Intercept onmouseover eventi su quell'elemento Nella funzione di callback non fare nulla; chiama invece un'altra funzione con il ritardo desiderato, ad es. in prototipo lo fai con functionName.delay (500)

  • Nella seconda funzione verifica se il mouse è ancora sull'elemento usando qualunque cosa jQuery ti dà per ottenere le coordinate del mouse e le coordinate dell'elemento. Se il mouse è ancora lì, fai quello che vuoi.

Questo non funzionerà per lunghi ritardi perché l'utente potrebbe spostare il mouse all'esterno e all'interno dell'elemento e functionName continuerà a sparare.

Se non ti dispiace che me lo dica, questa è una pessima idea.

+0

È un buon suggerimento, ma sembra un po 'complicato. – Cybermac

+0

Non è troppo complicato, ma la risposta che punta a "hover intent" è comunque migliore perché è già implementata, si collega a jQuery che già usi e probabilmente funziona già meglio della soluzione che sto proponendo –

0

In realtà, ho trovato anche questo plugin hover jquery. http://blog.threedubmedia.com/2008/08/eventspecialhover.html

Non utilizza la durata di attesa del mouseover, ma utilizza la velocità del mouse in un intervallo di tempo specifico.

Il risultato può essere visualizzato sui tre riquadri visualizzati sul lato destro di questa pagina: http://www.splendida.it (ci sto attualmente lavorando).

Mi sembra carino. Quando il mouse salta rapidamente dalla prima alla terza casella, non accade nulla, anche se il mouse passa sopra al secondo elemento.

Problemi correlati