How to create fade-in effect in div?

I have a div that receives data from the MySQL database and lists the images. I put a lightbox to make the visualization of the images more interesting and a fade-in effect so that whenever you change the menu category * refresh * to be given only in div and not on the entire page. But when I have open lightbox in some other category than the default one, which displays all of them, it does not open.

 <!-- Script do Fade In -->
    <script>
        $(document).ready(function(){
            var content = $('#modal');

            //pre carregando o gif
            loading = new Image(); loading.src = 'images/loading_ajax.gif';
            $('#menu-portifolio a').live('click', function( e ){
                e.preventDefault();
                content.html( '<img src="images/loading_ajax.gif" />' );
                var href = $( this ).attr('href');
                $.ajax({
                    url: href,
                    success: function( response ){
                        //forçando o parser
                        var data = $( '<div>'+response+'</div>' ).find('#modal').html();

                        //apenas atrasando a troca, para mostrarmos o loading
                        window.setTimeout( function(){
                            content.fadeOut('slow', function(){
                                content.html( data ).fadeIn();
                            });
                        }, 500 );
                    }
                });
            });
        });
    </script>


    <!-- Script do Lightbox -->
    <script>
        $(document).ready(function(){
            $("a[rel=modal]").click( function(ev){
                ev.preventDefault();

                var id = $(this).attr("href");

                var alturaTela = $(document).height();
                var larguraTela = $(window).width();

                //colocando o fundo preto
                $('#mascara').css({'width':larguraTela,'height':alturaTela});
                $('#mascara').fadeIn(50);
                $('#mascara').fadeTo("slow",0.8);

                var left = ($(window).width() /2) - ( $(id).width() / 2 );
                var top = ($(window).height() / 2) - ( $(id).height() / 2 );

                $(id).css({'top':top,'left':left});
                $(id).show();  
            });

            $("#mascara").click( function(){
                $(this).hide();
                $(".window").hide();
            });

                $('.fechar').click(function(ev){
                    ev.preventDefault();
                    $("#mascara").hide();
                    $(".window").hide();
                });
        });
    </script>

The results of the SQL query, in the case images are being displayed by categories.

Categoria 01 shows only images that are in this category.

When loading the page it automatically shows the images that are in the all category.