web-dev-qa-db-ger.com

Wie kann man .hover () warten lassen?

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');
    });
49
Michal

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.

75

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.

42
daniellmb
$('.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) );  
   }
 });
1
gustav

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');
});
1
Steph

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.

1
yklee1013

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.

1
John Calsbeek

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

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'); 
            }  
        }  
    );  
}); 
0
Sakata Gintoki
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 

0
Hadnazzar