Ritardare l'evento hover jquery?

Question

Vorrei ritardare un evento hover in jquery. Sto leggendo da un file quando l'utente passa sopra un collegamento 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 il licenziamento dell'evento?

Grazie.

Codice di esempio:

$(function() {
    $('#container a').hover(function() {
        $('<div id="fileinfo" />').load('ReadTextFileX.aspx',
            {filename:'file.txt'},
            function() {
                $(this).appendTo('#info');
            }
         );
    },
        function() { $('#info').remove(); }
    });
});

AGGIORNAMENTO: (14/01/09) Dopo aver aggiunto il plug-in HoverIntent, il codice sopra è 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() {
            $('<div id="fileinfo" />').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)
}

Answer 1

Utilizza il plug-in 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'attivazione del passaggio del mouse sui menu, ecc ...

C'è un approccio a questo approccio, alcune interfacce sono prive di uno stato 'hover' ad es. browser mobili come Safari sull'iPhone. Potresti nascondere una parte importante dell'interfaccia o della navigazione senza alcun modo per aprirla su un tale dispositivo. Potresti aggirare il problema con CSS specifici del dispositivo.

Answer 2

Devi controllare un timer al passaggio del mouse. Se non esiste (ovvero questo è il primo passaggio del mouse), crealo. Se esiste (ovvero non è non il primo passaggio del mouse), 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() {
            $('<div id="fileinfo" />').load('ReadTextFileX.aspx',
                {filename:'file.txt'},
                function() {
                    $(this).appendTo('#info');
                }
            );
        }, 500)
    },
    // mouse out
    });
});

Scommetto che jQuery ha una funzione che ti avvolge tutto.

Modifica : Ah sì, plugin jQuery per il salvataggio

Answer 3

Sono totalmente d'accordo sul fatto che hoverIntent sia la soluzione migliore, ma se ti capita di essere una sfortunata zolla che lavora su un sito Web con un processo lungo e prolungato per l'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 < li > se il mouse è rimasto su di esso per più di 300ms.

Answer 4

È possibile utilizzare una chiamata setTimeout () con un clearTimeout () sull'evento mouseout.

Answer 5

Nel 2016 la soluzione di Crescent Fresh non ha funzionato come previsto per me, quindi ho pensato a 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;
});

Answer 6

La mia soluzione è semplice. Ritarda il menu aperto se l'utente mantiene mouseenter su obj oltre 300ms:

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);
});