Question

i don’t get why this won’t work.

function notificationBoxOutput(type, message) {
    var noteBox = $('.notificationBox');

    noteBox.slideDown( function() {
        noteBox.delay(2500).slideUp();
    });
}

function notificationBoxCancel() {
        console.log('successfully fired');
    $('.notificationBox').slideUp();
}

So I call the function notificationBoxOutput to have kind of statusbar on top of the screen that gives some feedback. The bar slidesDown, holds 2,5 secs and then slides up.

The bar itself contains a little closer-icon that fires notificationBoxCancel on click. So the user has the possibility to close the the bar even faster then 2.5 secs. However the closer doesn’t work. The console says “successfully fired”, but the box doesn’t slideUp(). hide() does work! fadeOut() and slideUp() doesn’t.

Any idea why?

Answer 1

You should .stop() animations before you slide(them)Up. Try something like this:

function notificationBoxCancel() {
        console.log('successfully fired');
    $('.notificationBox').stop().slideUp();
}