jquery onclick fires prematurely(?)

Question

I've got the following script - i have a menu, and when the user clicks 'about', the menu disappears, and some animated div appears, and when user clicks anywhere i want the animated div to go away, and menu to reappear. the animation is restarted with x = setinterval(blabla), supposed to stop with document.click anywhere if x is not 0.

the problem is that it shows for a second and stops right after 'about' is clicked

jsfiddle - http://jsfiddle.net/EgtqF/

here:

 $('#about').click(function(){
        $('#menu div').fadeToggle(1000);
        $('#credits').fadeToggle(1000);
        refreshId = setInterval(function(){
            $('#credits').animate({'bottom':'100%'},5000,'linear',
                function(){
                    $('#credits').css({'bottom':'0%'})})},
            1000);
    });

    $(document).click(function(){
            if(refreshId != 0){
                clearInterval(refreshId);
                $('#credits').fadeToggle(100);
                $('#menu div').fadeToggle(100);
                refreshId = 0;
            }
        });

how do i get this to work??

Answer 1

Issue an event.stopPropagation() from your #about click handler to ensure that the click event is not bubbled up to your document object.

$('#about').click(function(e){
   e.stopPropagation();
   // ...
   return false;
});