jQuery Plugin zur verzögerten Ausführung der Methode hover()

Die jQuery-Methode .hover(handlerIn( eventObj ), handlerOut( eventObj )) ist die Kurzform der Hintereinanderschaltung der Methoden .mouseenter(handlerIn).mouseleave(handlerOut). hover() überwacht bei einem Element, ob der Mauszeiger sich über diesem befindet. Die Methoden innerhalb von hover() werden instantan ausgeführt, falls hover() ausgelöst wird. Meistens besteht der Anwendungsbereich dieser jQuery-Methode im Hervorheben des Elements, um dem User zu signalisieren, dass der Mauszeiger über diesem Element ist und hier weitere Aktionen getätigt werden können. hover() wird aber auch sehr oft eingesetzt, um bei Überfahren eines Elements mit der Maus, zusätzliche Details einzublenden. Genau hierauf zielt dieses Plugin ab. Um versehentliches Berühren nicht gleich mit der Ausführung der Methode handlerIn() zu quittieren, wird die Ausführung durch dieses Plugin um einen beliebigen Wert verzögert.

Hier der Code des Plugins:

// -------------------------------------------------------------------
// ------------- Autor: Patrick Saar - www.patrick-saar.de -----------
// ------------ jQuery Plugin - Delayed Hover Effect v. 1.0 ----------
// ------------------ Copyright 2012 Patrick Saar --------------------
// -------------------------------------------------------------------

(function ($) {
    $.fn.delayedHoverEffect = function (delayIn, handlerIn, delayOut, handlerOut) {
        return this.each(function () {
            var timeout1, timeout2;
            $(this).hover(function () {
                clearTimeout(timeout2);
                timeout2 = null;
                timeout1 = setTimeout(function () { handlerIn(); }, delayIn);
            },
            function () {
                clearTimeout(timeout1);
                timeout1 = null;
                timeout2 = setTimeout(function () { handlerOut(); }, delayOut);
            });
        });
    }
})(jQuery);

$('#delayed-hover-div').delayedHoverEffect(1000, function () { $('#div').css({'background': '#f00'}); }, 500, function () { $('#delayed-hover-div').css({'background': '#000'}); });

delayIn ist die Verzögerung der Methode handlerIn in Millisekunden, falls hover() ausgelöst wird. Genauso kann die Ausführung der Methode handlerOut um den Wert delayOut hinausgeschoben werden. Das Plugin gibt wieder ein jQuery-Objekt zurück um Chaining zu ermöglichen.

Für das untenstehende Beispiel wurde folgende Spezifikation verwendet:

$('#delayed-hover-div').delayedHoverEffect(
    1000,
    function () {
        $('#delayed-hover-div').css({'background': '#f00'});
    },
    500,
    function () {
        $('#delayed-hover-div').css({'background': '#000'});
    }
);

Bewege den Mauszeiger auf das schwarze Rechteck. Ist der Mauszeiger eine Sekunde auf dem Rechteck, so ändert sich die Farbe in rot. Ziehe nun den Mauszeiger wieder runter und nach 0,5 Sekunden ist das Rechteck wieder schwarz. Bei schnellem Überfahren des Rechtecks mit dem Mauszeiger passiert nichts.

Es sei noch erwähnt, dass $( ... ).delayedHoverEffect(0, function( eventObj ) { ... }, 0, function( eventObj ) { ... }); natürlich $( ... ).hover(function( eventObj ) { ... }, function( eventObj ) { ... }); entspricht.