jQuery .load() con efecto fadeIn

Question

Estoy intentando cargar #contenido de una URL a través de AJAX usando jQuery dentro de #primary. Carga pero no se desvanece. ¿Qué estoy haciendo mal?

$('.menu a').live('click', function(event) { 
     var link = $(this).attr('href'); 
     $('#content').fadeOut('slow', function(){ 
      $('#primary').load(link+' #content', function(){ 
       $('#content').fadeIn('slow'); 
      }); 
     }); 
     return false; 
    }); 

Muchas gracias por su ayuda.

Answer 1

En realidad, yo era capaz de hacerlo aplicando el efecto de la envoltura div lugar ...

$('#primary').fadeOut('slow', function(){ 
    $('#primary').load(link+' #content', function(){ 
     $('#primary').fadeIn('slow'); 
    }); 
}); 

Answer 2

Al usar load() jQuery usa internamente html() para actualizar su elemento. Esto significa que no puede aplicar ninguna animación, ya que solo está actualizando la propiedad innerHTML del elemento.

En su lugar, tendrá que escribir su propia solicitud de AJAX para obtener el nuevo HTML, ponerlo en el elemento, luego llamar al fadeIn().

$('.menu a').live('click', function(event) { 
    var link = $(this).attr('href'); 

    $('#content').fadeOut('slow', function() { 
     $.get(
      link +' #content', 
      function(data) { 
       $("#primary").html(data).fadeIn('slow'); 
      }, 
      "html" 
     ); 
    }); 
    return false; 
}); 

que utilizan get() aquí, pero que sólo podría utilizar la misma facilidad post() o ajax().

Además, solo para observar, live() ha quedado obsoleto. En su lugar, debe utilizar delegate() o, si está utilizando jQuery 1.7+, on().

Answer 3

que he encontrado haciendo algo como esto funciona bien ...

$ (' #Div '). FadeOut (0) .fadeIn(). Load (' foo.blah.html ');

Answer 4

también puede utilizar .load() en la decoloración efecto como éste

$("#container").fadeOut("slow").load('data.html').fadeIn('slow');

Answer 5

Ésta es la mejor manera de fade in/out que naturaly, primero ocultar su contenedor y luego se carga la página este contenedor (se cargará pero se ocultará) luego simplemente use la función Jquery .fadeIn() y lo mostrará mostrando el efecto especial.

$(".myClass").click(function() 
{ 
    $("#Container").hide(); 
    $("#Container").load("magasin.html"); 
    $("#Container").fadeIn(); 
}); 

Answer 6

Sólo esto:

$('.element').load('file.html',function(){}).hide().fadeIn(); 

O añadir este comportamiento por defecto en la función de carga():

$.fn.load_=$.fn.load; 
$.fn.load=function(){ 
    return $.fn.load_.apply(this,arguments).hide().fadeIn(); 
}