Hidden droppables not droppable?

Hidden droppables not droppable?


I have a 'trashcan'-droppable that accepts photo thumbnails. Works
fine, but what I want is that the droppable is visible only when an
item is being dragged, and hidden when the item has stopped dragging.
The trashcan is hidden by default and shown when activated. See the
code below. But it doesn't work. It seems as if when the div is hidden
the function is disabled too. Meaning, when you drop someting on it it
doesn't do anything. If you remove the 'display: none' it works fine
(or hide with $("#trash").hide() instead of display: none).
I'm puzzled.
$("#trash").droppable(
            {
                accept:         '.stackPic',
                activeclass:    'activeTrash',
                hoverclass:        'hoverTrash',
                activate:
                    function(ev, ui) {
                        $('#trash').show();
                    },
                deactivate:
                    function(ev, ui) {
                        $('#trash').fadeOut(500);
                    },
                drop:
                function(ev, ui)
                    {
                        var album_id     = <?=$this->uri->segment(2)?>;
                        var photo_id    = $(ui.draggable.element).attr("id");
                        $(ui.draggable.element).fadeOut(1000);
                        $.post("http://www.domain.com/delete_stack_photo/"+ album_id
+"/"+ photo_id);
}
            }
        );