Jquery-Hover-Ereignis verzögern?

Question

Ich möchte ein Hover-Ereignis in Jquery zu verzögern. Ich lese aus einer Datei, wenn Benutzer über einen Link oder ein Etikett schwebt. Ich möchte nicht, dass dieses Ereignis sofort eintritt, wenn der Benutzer gerade die Maus über den Bildschirm bewegt. Gibt es eine Möglichkeit, das Auslösen des Ereignisses zu verzögern?

Ich danke Ihnen.

Beispiel-Code:

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

UPDATE: (1/14/09) Nach dem Hinzufügen des HoverIntent-Plugins wurde der obige Code in den folgenden geändert, um ihn zu implementieren. Sehr einfach zu implementieren.

$(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

Verwenden Sie das hoverIntent-Plugin für Jquery: http://cherne.net/brian/resources/jquery.hoverIntent.html

Es ist absolut perfekt für das, was du beschreibst, und ich habe es bei fast jedem Projekt verwendet, bei dem die Aktivierung von Menüs usw. per Mouseover erforderlich war.

Es gibt ein Problem mit diesem Ansatz, einige Schnittstellen sind ohne eine "Hover"-Status zB. mobile Browser wie Safari auf dem iPhone. Es kann sein, dass Sie einen wichtigen Teil der Schnittstelle oder der Navigation ausblenden, ohne dass Sie ihn auf einem solchen Gerät öffnen können. Sie könnten dies mit gerätespezifischem CSS umgehen.

Answer 2

Sie müssen einen Timer beim Schweben überprüfen. Wenn er nicht vorhanden ist (d.h. dies ist der erste Hover), erstellen Sie ihn. Wenn er existiert (d.h. dies ist nicht dem ersten Schweben), töten Sie ihn und starten Sie ihn neu. Setzen Sie die Timer-Nutzlast auf Ihren Code.

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

Ich wette, jQuery hat eine Funktion, die das alles für Sie einpackt.

bearbeiten : Ah ja, jQuery-Plugin zur Rettung

Answer 3

Völlig einverstanden, dass hoverIntent die beste Lösung ist, aber wenn Sie zufällig ein unglücklicher Bauer sind, der auf einer Website mit einem langen und langwierigen Prozess für die Genehmigung von jQuery-Plugins arbeitet, hier ist eine schnelle und schmutzige Lösung, die gut für mich gearbeitet hat:

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

Dies ist nur für das Erweitern eines <li>, wenn die Maus länger als 300ms auf ihm steht.

Answer 4

Sie könnten einen setTimeout()-Aufruf mit einem clearTimeout()-Aufruf für das Mouseout-Ereignis verwenden.

Answer 5

2016 hat die Lösung von Crescent Fresh bei mir nicht wie erwartet funktioniert, also habe ich mir das hier ausgedacht:

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