I am displaying a message box on a website. I would like to be able to have it either fadeout on click or after X seconds. The problem is that the delay() function takes the place over the click() function making it so even if you click close you still have to wait the time.

Here is the 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);



})

I also set up a simple jsfiddle. To see the problem comment out the delay line http://jsfiddle.net/BandonRandon/VRYBk/1/