jQuery Fadeout auf Klicken oder nach Verzögerung

Ich bin die Anzeige einer message-box auf einer website. Ich möchte in der Lage sein, um es entweder fadeout auf Mausklick oder nach X Sekunden. Das problem ist, dass die delay() Funktion erfolgt über die click() Funktion, es so zu machen, auch wenn Sie auf schließen klicken, haben Sie immer noch warten, die Zeit.

Hier ist die jQuery

$(document).ready(function() {    
$(".close-green").click(function () {
        $("#message-green").fadeOut("slow");
    });

    //fade out in 5 seconds if not closed
    $("#message-green").delay(5000).fadeOut("slow");

})

Ich auch eine einfache jsfiddle. Um das problem auskommentieren der delay-line http://jsfiddle.net/BandonRandon/VRYBk/1/

  • mögliche Duplikate von Verzögerung JQuery effects
  • das ist nicht einmal annähernd das gleiche. Die person möchte wissen, WIE die Verzögerung eine animation, die die OP schon weiß, wie aber will man wissen, wie um zu verhindern, dass die Verzögerung, wenn ein Ereignis stattfindet, bevor die Verzögerung beendet ist.
InformationsquelleAutor Brooke. | 2011-03-17
  1. 22

    Ändern Sie es zu einem setTimeout:
    http://jsfiddle.net/VRYBk/3/

    (in der jsfiddle-link)
    Ich entfernt Ihre-delay-Zeile und ersetzt es mit einem standard - setTimeout wie:

    setTimeout(function(){
    $("#message-green").fadeOut("slow");
},5000)

    Als Hinweis, WARUM, ist, weil JS ist zu Lesen von oben nach unten und werde es Lesen, Ihre Verzögerung, bevor Sie klicken, und das Ereignis auszulösen. Deshalb, auch wenn Sie auf die Verzögerung ausgeführt wird, so dass der ganze animation zu pausieren.

    • Aktualisiert meine Antwort zu erklären, WARUM du bist mit diesem Problem
    • Danke, ich dachte, es war etwas einfaches. Ich wirklich zu schätzen, Ihnen zu erklären, WARUM auch! 🙂
    InformationsquelleAutor Oscar Godson
  2. 7

    Wäre dies ein Idealer Einsatz für jQuery 1.5 die neue Latente Objekte:

    //a deferred object for later processing
var def = $.Deferred();

//resolve the deferred object on click or timeout
$(".close-green").click(def.resolve);
setTimeout(def.resolve, 5000);

//however the deferred object is resolved, start the fade
def.done(function() {
    $(".message-green").fadeOut("slow");
});

    Arbeiten demo auf http://jsfiddle.net/Nyg4y/3/

    Beachten Sie, dass es egal ist, dass, wenn Sie die Taste drücken Sie die timer noch feuert - der zweite Aufruf def.resolve() ignoriert.

    • Danke, ich bin mit einer etwas älteren version der Bibliothek, aber wenn ich ein upgrade auf 1.5 habe ich jetzt etwas zu gehen off.
    InformationsquelleAutor Alnitak
  3. 1

    Ich Quelle es der beste workaround vorgeschlagen von Oscar Patenkind, habe ich irgendwie das dies nur Hinzugefügt, um es:

    if (! $clicked.hasClass("search"))
{
    setTimeout(function()
    {
        jQuery("#result").delay('1500').fadeOut('2800');
    },7000);
}
});

    Seine ursprüngliche Vorschlag ist sehr nützlich:

    Ändern Sie es zu einem setTimeout: http://jsfiddle.net/VRYBk/3/

    (in der jsfiddle-link)
    Ich entfernt Ihre-delay-Zeile und ersetzt es mit einem standard setTimeout wie:

     setTimeout(function(){
      $("#message-green").fadeOut("slow");
 },5000)

    Durch Oscar Patenkind,

    InformationsquelleAutor Peter Manoukian
Schreibe einen Kommentar