jQuery .load() con effetto fadeIn

Question

Sto provando a caricare #contenuto di un url tramite AJAX utilizzando jQuery in #primary. Carica ma non sbiadisce. Che cosa sto facendo di sbagliato?

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

Molte grazie per il vostro aiuto.

Answer 1

In realtà sono stato in grado di farlo applicando l'effetto al div involucro invece ...

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

Answer 2

Quando si utilizza load() jQuery utilizza internamente html() per aggiornare l'elemento. Ciò significa che non puoi applicare alcuna animazione ad esso, poiché stai semplicemente aggiornando la proprietà innerHTML dell'elemento.

Invece è necessario scrivere la propria richiesta AJAX per ottenere il nuovo codice HTML, inserirlo nell'elemento, quindi chiamare 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; 
}); 

ho usato get() qui, ma si potrebbe altrettanto facilmente usare post() o ajax().

Inoltre, solo per notare, live() è stato deprecato. Dovresti invece usare delegate() o, se stai usando jQuery 1.7+, on().

Answer 3

io ho trovato a fare qualcosa di simile funziona bene ...

$ (' #Div ') fadeOut (0) .fadeIn load() (..' foo.blah.html ');

Answer 4

È anche possibile utilizzare .load() in dissolvenza effetto come questo

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

Answer 5

Questo è il modo migliore per fade in/out è naturaly, in primo luogo è nascondere il proprio contenitore, allora si carica la pagina in questo contenitore (verrà caricato ma nascosto) quindi utilizzare semplicemente la funzione Jquery .fadeIn() e lo renderà visibile aggiungendo l'effetto speciale.

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

Answer 6

Solo questo:

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

o per aggiungere questo comportamento come predefinito in) funzione di caricamento (:

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