Mehrfachausführung von Animation verhindern

[Liath]

Hallo zusammen, ich hab ein vielleicht ungewöhnliches Anliegen...

Ich hab auf meiner Seite einen Warenkorb, dort wird bei hinzufügen eines Artikels eine Meldung eingeblendet. Wenn ich allerdings schnell, mehrfach auf hinzufügen klicke, wird die Meldung quasi in eine Warteschlange gesetzt und alle Meldungen werden nacheinander ein- und ausgeblendet.


So ist mein bisheriger Aufruf

if (rel == 'add') { message = 'Artikel hinzugefügt'); }
else if (rel == 'del') { message = 'Artikel gelöscht'; }
else if (rel == 'inc') { message = 'Stückzahl erhöht'; }
else if (rel == 'dec') { message = 'Stückzahl reduziert'; }      

if (message) {
    $("#cartMessage").empty()
                     .append("<div id=\"cartMessageInner\">"+message+"</div>")
                     .fadeToggle("slow").delay(1000)
                     .fadeToggle("slow").delay(1000);
}

Hat jemand eine Idee, wie ich ihm sagen kann, dass er die Meldung nicht stacken/queuen soll?

 

[kkapsner]

.fadeOut() | jQuery API Documentation - der Queue-Parameter

 

[Liath]

versteh grad nicht wie ich das damit bewerkstelligen soll...

mit .fadeOut() kann ich ja die Animation bewerkstelligen, aber nicht das "stacken" der Meldungen verhindern... oder?

Er müsste ja irgendwie prüfen ob gerade eine Animation läuft und alle nachfolgenden währenddessen blocken, damit nicht alle nacheinander angezeigt werden

 

[mikdoe]

nein. hast du die verlinkte doku gelesen?

 

[tsseh]

if (rel == 'add') { message = 'Artikel hinzugefügt'); }
else if (rel == 'del') { message = 'Artikel gelöscht'; }
else if (rel == 'inc') { message = 'Stückzahl erhöht'; }
else if (rel == 'dec') { message = 'Stückzahl reduziert'; }      

if (message && addMsg) {
    addMsg= false;
    $("#cartMessage").empty()
                     .append("<div id=\"cartMessageInner\">"+message+"</div>")
                     .fadeToggle("slow").delay(1000)
                     .fadeToggle("slow").delay(1000).queue(function()
                     {
                       addMsg = true;
                     });
}

jetzt musst du nur noch addMsg irgendwo in deinem scope unterbringen und mit true vorinitialisieren.

 

[Liath]

nein. hast du die verlinkte doku gelesen?

Ja, hab ich, hab aber nicht wirklich sehr viel davon verstanden... bin noch ziemlich neu was JS und jQuery angeht und hab da ehrlich gesagt nicht durchgeblickt

if (rel == 'add') { message = 'Artikel hinzugefügt'); }
else if (rel == 'del') { message = 'Artikel gelöscht'; }
else if (rel == 'inc') { message = 'Stückzahl erhöht'; }
else if (rel == 'dec') { message = 'Stückzahl reduziert'; }      

if (message && addMsg) {
    addMsg= false;
    $("#cartMessage").empty()
                     .append("<div id=\"cartMessageInner\">"+message+"</div>")
                     .fadeToggle("slow").delay(1000)
                     .fadeToggle("slow").delay(1000).queue(function()
                     {
                       addMsg = true;
                     });
}

jetzt musst du nur noch addMsg irgendwo in deinem scope unterbringen und mit true vorinitialisieren.

so in etwa dachte ich mir das auch, ich komm mir jetzt ziemlich blöd vor das zu fragen, aber bringt ja nichts...

scope

 

[kkapsner]

https://en.wikipedia.org/wiki/Scope_(computer_science)#JavaScript