Question

My thoughts at first were that this was a syntax problem, but I don’t see any syntax issues. I’ve added debug code and that gave odd results, x is logged before jQuery('#notification')

document.triggerNotification = function (type, message) {
    jQuery(document.body).append("<div class='push-notification push-"+type+"' id='notification'>"+message+"</div>");

    setTimeout(jQuery('#notification').fadeOut(1200, function () {
        console.log(jQuery('#notification'));
        jQuery('#notification').remove();
        console.log(jQuery('#notification'));
    }), 3000);
    console.log('x');
}

Firebug provides the following output:

x
[div#notification.push-notification]
[]
missing ] after element list - [Break on this error] [object Object]

Everything is successfully executing but it’s still throwing an error.

Answer 1

setTimeout expects a function as its first argument. You’re giving it a collection of jQuery objects. Try the following:

document.triggerNotification = function (type, message) {
    jQuery(document.body).append("<div class='push-notification push-"+type+"' id='notification'>"+message+"</div>");

    setTimeout(function() { jQuery('#notification').fadeOut(1200, function () {
        console.log(jQuery('#notification'));
        jQuery('#notification').remove();
        console.log(jQuery('#notification'));
    })}, 3000);
    console.log('x');
}

Note the anonymous function that has been wrapped around your jQuery('#notification').fadeOut() call. With your current code, I’d expect the fadeOut to execute immediately, instead of after the specified 3 seconds.