How to create fade-in effect in div?

Question

I have a div which receives data from the Mysql database and lists the images. I placed a lightbox to make more interesting the visualization of images and an effect of fade-in so that whenever you change the category of the menu*refresh* it was only given in the div and not on the full page. Only when I have open the lightbox in some other category than the default, which displays all of them, 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 case images are being displayed by categories.

Categoria 01 shows only images that are of this category.

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

There the lightbox works normally, but when switching to Categotia 01 for example the lightbox no longer works, in any other category.

Is there any other script effect fade-in to indicate me, since I am still a layman in the matter of jQuery and AJAX.

Answer 1

var data = $( '<div>'+response+'</div>' ).find('#modal').html();

It would be interesting to assign an 'id' or 'class' to your div, make your life easier (and maybe help the script) to identify the element on your page, something like this:

var data = $( '#div'+response.id ).find('#modal').html();

Another thing, assuming that for each category there will be a div[id=modal], it would be interesting to also exchange #modal for . modal, only for the purpose of validating your html code.

-- If you can send the code returned from your request and the html, it would be of great help to us and to you. Try the jsfiddle.