Jquery，ajax，fadeIn，fadeOut

Question

我有这个功能：

  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({
                 url: link,
                 type: 'get',
                 success: function(html){
                     update_page(html).fadeIn(2000);
                 }
            });
        });
        return false;
    });         
});

fadeOut正在运行，但fadeIn无效。什么似乎是问题？

Answer 1

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>

到

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

Answer 2

将update_page函数修改为：

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

以便在jquery对象上调用.fadeIn（）。

Answer 3

我认为你的update_page需要返回jQuery对象，以便链接

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

Answer 4

update_page（）不是jQuery对象。

尝试：

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

Answer 5

两个问题：一个是链，另一个是电话：

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

编辑：这段代码确实让我感到有些困扰，因为如果你从一类.news逐渐消失到另一个新类，旧的仍然会在那里，他们将会重新投入。

如果这也是一个问题，您可能希望在淡入新内容之前删除旧版本...或者甚至在新内容新插入之前删除旧版本。

Answer 6

使用委托重写：

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