Objekt einblenden / ausblenden

[Forumsgast]

Hi

Ich versuche gerade zwei Sachen zu kombinieren.

Eine Message soll eingeblendet werden und nach 5 Sekunden wieder ausgeblendet werden.

Soweit so einfach.

Jedoch will ich auch, dass, wenn der User auf die Message klickt, diese schon vorzeitig ausgeblendet wird.

Folgendes blendet Zeit gesteuert ein und aus. Eine Reaktion auf Klick erfolgt jedoch nicht:

hiddenMessage = function () {
    if ($('.hiddenMessage').length > 0) {
        var hiddenMsg = $('.hiddenMessage');
        var Msg = hiddenMsg.html();
            if(Msg.length > 0) {
                hiddenMsg.slideDown().delay(3000).slideUp();
                hiddenMsg.click(function() {
                   $(this).slideUp(); 
                });
                
            }
    }
}

Wie mache ich es richtig?

[Forumsgast]

Spar Dir das Delay und benutze ein echtes Timeout. Das kannst Du nämlich abbrechen.

[Forumsgast]

Oder sieh dir das jGrowl an, das bringt die Funktionalität mit: archive.plugins.jquery.com/project/jGrowl

[Forumsgast]

674.88 KB für diesen 2-Zeiler-Effekt? Hmm.

[Forumsgast]

@nikosch: Danke. Werd's ausprobieren.
@ChristianK: Da hat nikosch wohl recht. Dank auch an Dich.

[Forumsgast]

674.88 KB für diesen 2-Zeiler-Effekt? Hmm.

Rein für diese Anforderung ist es wihl zu viel, abr falls einmal mehrere Meldungen gleichzeitig oder ähnliches erfolgen sollten wäre das Framework gut...

[Forumsgast]

abr falls einmal mehrere Meldungen gleichzeitig ..erfolgen sollten wäre das Framework gut...

Auch mehrere Meldungen gleichzeitig ist für pures jQuery kein Problem.
So sollte es gehen:

hiddenMessage = function(){
    var hiddenMsg = $('.hiddenMessage');
    hiddenMsg.slideDown();
    var t_id = window.setTimeout(function(){hiddenMsg.slideUp();},4000);
    hiddenMsg.click(function(){
        window.clearTimeout(t_id);
        hiddenMsg.slideUp();
    });
};