Ich habe ein Dropdown-Menü. Wenn es nun auf mehrere Ebenen heruntergerutscht ist, möchte ich, dass es eine Wartezeit von etwa 2 Sekunden hinzufügt, bevor es verschwindet, sodass der Benutzer wieder einsteigen kann, wenn er versehentlich die .hover()
bricht.
Ist es möglich?
mein Code für die Folie:
$('.icon').hover(function() {
$('li.icon > ul').slideDown('fast');
}, function() {
$('li.icon > ul').slideUp('fast');
});
Dadurch wird die zweite Funktion vor der Ausführung 2 Sekunden (2000 Millisekunden) warten:
$('.icon').hover(function() {
clearTimeout($(this).data('timeout'));
$('li.icon > ul').slideDown('fast');
}, function() {
var t = setTimeout(function() {
$('li.icon > ul').slideUp('fast');
}, 2000);
$(this).data('timeout', t);
});
Außerdem wird das Zeitlimit gelöscht, wenn der Benutzer zurückkehrt, um verrücktes Verhalten zu vermeiden.
Dies ist jedoch kein sehr eleganter Weg. Sie sollten sich wahrscheinlich das hoverIntent plugin ansehen, das dieses spezielle Problem lösen soll.
ich persönlich mag das "hoverIntent" -Plugin:
http://cherne.net/brian/resources/jquery.hoverIntent.html
von der Seite: hoverIntent ist ein Plug-In, das versucht, die Absicht des Benutzers zu bestimmen ... wie eine Kristallkugel, nur mit der Mausbewegung! Es funktioniert wie (und wurde von jQuery's eingebautem Hover abgeleitet). Anstatt die onMouseOver-Funktion sofort aufzurufen, wartet sie jedoch, bis die Maus des Benutzers ausreichend langsamer ist, bevor der Aufruf erfolgt.
Warum? Das versehentliche Auslösen von Animationen oder Ajax-Anrufen verzögern oder verhindern. Einfache Timeouts funktionieren für kleine Bereiche, aber wenn Ihr Zielbereich groß ist, kann er unabhängig von der Absicht ausgeführt werden.
var config = {
sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
interval: 200, // number = milliseconds for onMouseOver polling interval
over: makeTall, // function = onMouseOver callback (REQUIRED)
timeout: 500, // number = milliseconds delay before onMouseOut
out: makeShort // function = onMouseOut callback (REQUIRED)
};
$("#demo3 li").hoverIntent( config )
Einstellmöglichkeiten
Empfindlichkeit: Wenn die Maus zwischen den Abfrageintervallen weniger als diese Anzahl von Pixeln bewegt, wird die Funktion "over" aufgerufen. Mit der Mindestempfindlichkeitsschwelle von 1 darf sich die Maus nicht zwischen Abfrageintervallen bewegen. Bei höheren Empfindlichkeitsschwellen erhalten Sie mit höherer Wahrscheinlichkeit ein falsch positives Ergebnis. Standardempfindlichkeit: 7
Intervall: Die Anzahl der Millisekunden, die hoverIntent zwischen dem Lesen und Vergleichen von Mauskoordinaten wartet. Wenn die Maus des Benutzers das Element zum ersten Mal eingibt, werden ihre Koordinaten aufgezeichnet. Die "over" -Funktion kann am schnellsten nach einem einzelnen Abfrageintervall aufgerufen werden. Wenn Sie das Abrufintervall höher einstellen, wird die Verzögerung vor dem ersten möglichen "Überruf" erhöht, aber auch die Zeit bis zum nächsten Vergleichspunkt. Standardintervall: 100
over: Erforderlich. Die Funktion, die Sie onMouseOver aufrufen möchten. Ihre Funktion empfängt die gleichen "this" - und "event" -Objekte wie bei der hover-Methode von jQuery.
timeout: Eine einfache Verzögerung in Millisekunden, bevor die Funktion "out" aufgerufen wird. Wenn der Benutzer vor Ablauf des Timeouts über das Element zurückfährt, wird die Funktion "out" nicht aufgerufen (und die Funktion "over" wird nicht aufgerufen). Dies dient in erster Linie zum Schutz vor schlechten/menschlichen Mausbewegungen, die den Benutzer vorübergehend (und unabsichtlich) vom Zielelement abhalten ... und ihm Zeit für die Rückkehr geben. Standard-Timeout: 0
out: Erforderlich. Die Funktion, die Sie onMouseOut aufrufen möchten. Ihre Funktion empfängt die gleichen "this" - und "event" -Objekte wie bei der hover-Methode von jQuery. Beachten Sie, dass hoverIntent die Funktion "out" nur dann aufruft, wenn die Funktion "over" bei demselben Lauf aufgerufen wurde.
$('.icon').on("mouseenter mouseleave","li.icon > ul",function(e){
var $this = $(this);
if (e.type === 'mouseenter') {
clearTimeout( $this.data('timeout') );
$this.slideDown('fast');
}else{ // is mouseleave:
$this.data( 'timeout', setTimeout(function(){
$this.slideUp('fast');
},2000) );
}
});
Folgendes wird das Auslösen des Gleitens um 2 Sekunden stoppen:
$('.icon').hover(function() {
$('li.icon > ul').delay(2000).slideDown('fast');
}, function() {
$('li.icon > ul').slideUp('fast');
});
oder Sie können einfach .__ verwenden. Übergang: alle 2s Easy-In-Out. Stellen Sie sicher, dass Sie für verschiedene Browser -webkit, -moz und -o hinzufügen.
Die allgemeine Idee ist, setTimeout
wie folgt zu verwenden:
$('.icon').hover(function() {
$('li.icon > ul').slideDown('fast');
}, function() {
setTimeout(function() {
$('li.icon > ul').slideUp('fast');
}, 2000);
});
Dies kann jedoch nicht intuitiv sein, wenn der Benutzer mauset und dann schnell wieder mauset. Dies gilt nicht für das Löschen des Timeouts, wenn der Benutzer erneut darüber fährt. Das würde zusätzlichen Zustand erfordern.
Ich möchte Paolo Bergantino hinzufügen, dass Sie dies ohne das Attribut data tun können:
var timer;
$('.icon').hover(function() {
clearTimeout(timer);
$('li.icon > ul').slideDown('fast');
}, function() {
timer = setTimeout(function() {
$('li.icon > ul').slideUp('fast');
}, 2000);
});
Ich denke, das ist Ihr Code, den Sie brauchen:
jQuery( document ).ready( function($) {
var navTimers = [];
$('.icon').hover(function() {
var id = jQuery.data( this );
var $this = $( this );
navTimers[id] = setTimeout( function() {
$this.children( 'ul' ).slideDown('fast');
navTimers[id] = "";
}, 300 );
},
function () {
var id = jQuery.data( this );
if ( navTimers[id] != "" ) {
clearTimeout( navTimers[id] );
} else {
$( this ).children( "ul" ).slideUp('fast');
}
}
);
});
var timer;
var delay = 200;
$('#hoverelement').hover(function() {
on mouse hover, start a timeout
timer = setTimeout(function() {
Do your stuff here
}, delay);
}, function() {
Do mouse leaving function stuff here
clearTimeout(timer);
});
// edit: Code einfügen