Verzögerung jquery Hover-Ereignis?

Question

Ich mag ein Hover-Ereignis in Jquery verzögern. Ich lese aus einer Datei, wenn der Benutzer über einen Link oder das Etikett schwebt. Ich glaube nicht, dieses Ereignis will sofort der Benutzer im Fall auftreten wird nur über den Bildschirm, um die Maus zu bewegen. Gibt es eine Möglichkeit, das Ereignis zu verzögern Brennen?

Danke.

Beispielcode:

$(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 den obigen Code-Plugin wurde in die folgenden geändert, sie umzusetzen. 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

Mit der 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 auf fast jedes Projekt verwendet, die Mouseover-Aktivierung von Menüs usw. erforderlich ...

Es gibt eine Gotcha diesen Ansatz sind einige Schnittstellen frei von einem ‚schweben‘ Zustand zB. mobiler Browser wie Safari auf dem iPhone. Sie können einen wichtigen Teil der Schnittstelle oder die Navigation ohne die Möglichkeit, es auf einem solchen Gerät zu öffnen versteckt. Sie könnten mit gerätespezifischen CSS runden diese.

Answer 2

Sie benötigen einen Timer auf schweben zu überprüfen. Wenn es nicht existiert (dh dies der erste Hover ist), erstellen Sie es. Wenn es vorhanden ist (dh das ist nicht die erste schweben), tötet es und es neu starten. Stellen Sie den Timer Nutzlast, um 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 hat jQuery eine Funktion, die dies auf alle für Sie hüllt.

Bearbeiten : Ah ja, jQuery-Plugin zur Rettung

Answer 3

Völlig einig, dass hoverIntent die beste Lösung ist, aber wenn man ein unglücklicher sod geschehen sein, die mit einer langen und langwierigen Prozess zur Genehmigung von jQuery Plugins auf einer Website funktioniert, hier ist eine schnelle und schmutzige Lösung, die gut für mich gearbeitet:

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

Das hier ist nur für ein

erweitern, wenn die Maus auf sie länger als 300ms ist.

Answer 4

Sie könnten eine setTimeout verwenden () mit einem clear () auf dem mouseout Ereignisse.

Answer 5

Im Jahr 2016 Crescent Frisch-Lösung nicht so für mich erwartet funktionieren, so kam ich mit auf dem Punkt:

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

Meine Lösung ist einfach. Verzögerung Menü öffnen, wenn der Benutzer MouseEnter- auf obj über 300ms halten:

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