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()});
                        } );