Jquery Hover Event verzögern?

93

Ich möchte ein Schwebeereignis in jquery verzögern. Ich lese aus einer Datei, wenn der Benutzer mit der Maus über einen Link oder eine Beschriftung fährt. Ich möchte nicht, dass dieses Ereignis sofort auftritt, wenn der Benutzer nur die Maus über den Bildschirm bewegt. Gibt es eine Möglichkeit, das Auslösen des Ereignisses zu verzögern?

Danke dir.

Beispielcode:

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

UPDATE: (14.01.09) Nach dem Hinzufügen des HoverIntent-Plugins wurde der obige Code wie folgt 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)
}
Brettski
quelle
1
Vielen Dank für die Bereitstellung für hoverIntent
JavaKungFu

Antworten:

91

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

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

Es gibt ein Problem bei diesem Ansatz, einige Schnittstellen haben keinen Schwebezustand, z. mobile Browser wie Safari auf dem iPhone. Möglicherweise verstecken Sie einen wichtigen Teil der Benutzeroberfläche oder Navigation, ohne sie auf einem solchen Gerät öffnen zu können. Sie können dies mit gerätespezifischem CSS umgehen.

Roborourke
quelle
Oder dieses Plugin funktioniert auch wie ein Zauber github.com/john-terenzio/jQuery-Hover-Delay
Glimmer
50

Sie müssen einen Timer beim Hover überprüfen. Wenn es nicht vorhanden ist (dh dies ist der erste Schwebeflug), erstellen Sie es. Wenn es existiert (dh dies ist nicht der erste Schwebeflug), beenden Sie es und starten Sie es neu. Stellen Sie die Timer-Nutzdaten auf Ihren Code ein.

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

Edit : Ah ja, jQuery Plugin zur Rettung

Halbmond frisch
quelle
9
Trotzdem danke für eine Nicht-Plugin-Lösung!
Jrgns
4
Ich habe ein clearTimeout (Timer) hinzugefügt. Timer = null; in der Mouseout-Seite, aber das hat perfekt funktioniert und YAP (ein weiteres Plugin) vermieden
Andiih
@Andiih Großartiger Anruf und vielen Dank, dass Sie mir das Akronym "YAP" vorgestellt haben.
Jon
du meinst wahrscheinlich debounce ()
Vitim.us
11

Stimmen Sie voll und ganz zu, dass hoverIntent die beste Lösung ist. Wenn Sie jedoch ein unglücklicher Kerl sind, der auf einer Website mit einem langen und langwierigen Prozess zur Genehmigung von jQuery-Plugins arbeitet, finden Sie hier eine schnelle und schmutzige Lösung, die für mich gut funktioniert 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 zum Erweitern eines <li> gedacht, wenn die Maus länger als 300 ms darauf war.

Matthew Millman
quelle
Danke, fand das nützlicher als die anderen Antworten.
Ray
6

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

Dan Monego
quelle
1

Im Jahr 2016 hat die Lösung von Crescent Fresh für mich nicht wie erwartet funktioniert, daher habe ich mir Folgendes 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;
});
das Netz
quelle
-2

Meine Lösung ist einfach. Öffnen Sie das geöffnete Menü, wenn der Benutzer das Mauszentrum länger als 300 ms auf dem Objekt hält:

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