Jquery, ajax, fadeIn, fadeOut

I have this function:

  function update_page(html){
    $('#pagg').html(html);
}

   $(function(){
    $('#pagg > a').live('click', function(event){
         event.preventDefault();
           var link = $(this).attr('href');

       $('.news').fadeOut(2000, function(){                    
          $.ajax({
开发者_JAVA百科                 url: link,
                 type: 'get',
                 success: function(html){
                     update_page(html).fadeIn(2000);
                 }
            });
        });
        return false;
    });         
});

fadeOut is working, but fadeIn is not working. What seems to be the problem?

---

function carga_sector(contenedor,url,parametros)
{
    var contenedor="#"+contenedor;
    var url,parametros;
        $(contenedor).html('<div><img src="images/load.gif"/>Cargando...</div>');
        $(contenedor).fadeOut('slow',function()
            {
                    $.ajax(
                    {
                        url:url,
                        type:'post',
                        data:parametros,
                        async:true,
                        success: function(data) 
                                {
                                    $(contenedor).html(data);
                                    $(contenedor).fadeIn('fast');
                                },
                        contentType: "application/x-www-form-urlencoded",
                        dataType: "html",
                        global: true,
                        ifModified: false,
                        processData:true
                     }
                );
            }
        )
}

<a href="javascript:void(0)" 
onclick="javascript:carga_sector('div_nombre','pagina.php','&par1=valor1&valor2=valor2')">Envia Datos < /a>

to

<a href="javascript:void(0)" 
onclick="javascript:carga_sector('div_nombre','pagina.php',$("#form").serialize())">Envia Formulario < /a>

---

Rewritten using delegate:

$(function(){     
    $('#pagg').delegate('a', 'click', function(event){
         event.preventDefault();
         var link = $(this).attr('href');
         $('.news').fadeOut(2000).remove(this);
         $.ajax({
             url: link,
             type: 'get',
             success: function(html){
                 $('#pagg').html(html).find('.news').fadeIn(2000);
             }
         });
     });
     return false; 
});

---

modify the update_page function to this:

function update_page(html){
  return $('#pagg').html(html);
}

so that .fadeIn() gets called on a jquery object.

---

I think your update_page needs to return the jQuery object so it can be chained

function update_page(html){
    return $('#pagg').html(html);
}

---

update_page() is not a jQuery object.

try:

function update_page(html){
    $('#pagg').html(html).fadeIn(2000);
}

---

Two issues: one is the chain the other is the call:

function update_page(html){
     $('#pagg').html(html).fadeIn(2000);
}
$(function(){
    $('#pagg > a').live('click', function(event){
        event.preventDefault();
        var link = $(this).attr('href');
        $('.news').fadeOut(2000, function(){
             $.ajax({ 
                 url: link,
                 type: 'get',
                 success: function(html){
                     update_page(html);
                  }
             });
         });
    return false;
    });
});

EDIT: This code does bother me a bit in that IF you are fading from one class of .news to another NEW class, the old one will still BE there and they BOTH will fade back in.

If that is also an issue you may want to remove the old one prior to fade in of the new one...or even prior to the new insertion of new content.