Make element fade away then display:none;

Question

I have an element that fades in, its the size of the page and goes over top of the whole page. when you click the close button it should fade out. I have this all working but my issue is when I close it, its opacity is set to 0, but you can still click what was in the element. (I have a couple a tags in it)

So.. your clicking it even though its invisible. How do I make it not appear AT ALL in the code, instead of just going invisible?

What I have:

$('#menu_thumbnails').toggle(function() {
                        $('div#thumbnails').show();
                        $('div#thumbnails').stop().fadeTo(500, 1);
                    }, function() {
                        $('div#thumbnails').stop().fadeTo(500, 0, hideThumbs());
                        function hideThumbs() {
                                $('div#thumbnails').hide();
                        }
                        } );

I also tried

$('div#thumbnails').css('display','none'); 

instead of the .hide() but that did not do anything.

Any help would be great! Thanks

Answer 1

Have you tried it like this:

$('#menu_thumbnails').toggle(function() {
                        $('div#thumbnails').show();
                        $('div#thumbnails').stop().fadeTo(500, 1);
                    }, function() {
                        $('div#thumbnails').stop().fadeTo(500, 0,
                            function(){$(this).hide()});
                        } );

Answer 2

I'm not a jquery expert but I think the problem is that you are using .toggle(). toggle() reacts to the state of your selector's display attribute so if it is visible it will hide and show if it is hidden.

So it will never be "unclickable" with toggle.