Du verwendest einen Internet Explorer in einer Version kleiner gleich 8. Dieser Browser wird nicht unterstützt. Bitte aktualisiere mindestens auf Version 9.
Patrick Saar - Codes

Codes

Patrick Saar

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

Ein jQuery Plugin, das die Ausführung der jQuery-Methode hover() verzögert, um die Logik innerhalb von hover() bei unabsichtlichem Berühren eines Elements mit dem Mauszeiger nicht auszuführen.
jQuery

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.

Beispiel

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

1,39 KB - Downloads: 1164

Diese Seite verwendet Cookies um die beste Nutzerfreundlichkeit zu bieten. Falls Du auf der Seite weitersurfst, stimmst Du der Cookie-Nutzung zu.
Details Ok