JQuery: Hover-Funktion, wie man eine Verzögerung hinzufügt

Question

Ich habe etwas JQuery, das ein JQuery-Dialogfenster (http://docs.jquery.com/UI/Dialog) öffnet, wenn Sie mit der Maus über ein Bild fahren, wie folgt:

    $(document).ready(function() {
        $("img").hover(function() {

             $("#dialog").dialog();
        });
    });

Ich habe 2 Fragen 1. Wenn ich den Dialog schließe und dann erneut über ein Bild fahre, erscheint der Dialog nicht erneut. Wie kann ich das beheben? 2. Wie kann ich das Dialogfeld nur dann öffnen, wenn der Benutzer für ein paar Sekunden über dem Bild schwebt?

Answer 1

1) Verwenden Sie die Ereignisse mouseover/mouseout oder mouseenter/mouseleave.

2) Überprüfen Sie das hier : http://cherne.net/brian/resources/jquery.hoverIntent.html. Ich habe es an mehreren Stellen verwendet und es ermöglicht ziemlich schöne Anpassungen für das Schweben. Es kümmert sich auch um Punkt 1 und fängt seine eigenen Ereignisse ein.

Answer 2

1 - Sie müssen den Dialog zuerst initialisieren. Code hier

$(document).ready( function() { 
  $("#dialog").dialog({ autoOpen: false }); // Initialisierung ohne Anzeige

  $("img").bind("mouseover", function() { 
    $("#dialog").dialog('open'); // den Dialog öffnen
  }); 

});

2 - Verwenden Sie einfach einen Zähler

var _counter = 0;
var _seconds = 0;

$("img").hover(function() {
    // Mausüber
     _counter = setInterval(openDialogNow(), 1000);
}, function() {
    // Mausaußen
    clearInterval(_counter);
});

function openDialogNow() {
    // Diese Funktion wird jede Sekunde ausgeführt, solange der Benutzer nicht die Maus aus dem Bild herausführt
    _seconds++; // 1 zur globalen Variablen hinzufügen

    if(_seconds == 3) { // Wird in 3 Sekunden öffnen, 3 * 1000 Millisekunden
         _seconds = 0;  // Zurücksetzen, damit wir es später wieder verwenden können
         $("#dialog").dialog('open'); // den Dialog öffnen
    }
}

Answer 3

Verwenden Sie die jQuery-Methode .delay().

http://api.jquery.com/delay/