jQuery.load () con efecto fadeIn

Estoy tratando de cargar #contenido de una url a través de AJAX usando jQuery dentro de #primary. Se 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.

Author: Gab, 2012-02-18
Source

6 answers

En realidad fui capaz de hacerlo aplicando el efecto a la envoltura div en su lugar...

$('#primary').fadeOut('slow', function(){
    $('#primary').load(link+' #content', function(){
        $('#primary').fadeIn('slow');
    });
});
 33
Author: Gab,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-02-19 16:25:05

Solo esto: 

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

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

$.fn.load_=$.fn.load;
$.fn.load=function(){
    return $.fn.load_.apply(this,arguments).hide().fadeIn();
}
 9
Author: Brynner Ferreira,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-01-27 02:06:58

También puede usar .load () en efecto de desvanecimiento como este

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

 4
Author: Vijaysinh Parmar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-12-21 19:17:48

Cuando se utiliza load() jQuery utiliza internamente html() para actualizar el elemento. Esto significa que no puede aplicarle ninguna animación, ya que solo está actualizando la propiedad innerHTML del elemento.

En su lugar, necesitará escribir su propia solicitud AJAX para obtener el nuevo HTML, ponerlo en el elemento y luego llamar a 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;
});

Usé get() aquí, pero podrías usar post() o ajax() con la misma facilidad.

También, solo para notar, live() ha sido obsoleto. En su lugar, debe usar delegate() o, si está usando jQuery 1.7+, on().

 3
Author: Rory McCrossan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-02-18 00:29:35

He encontrado que hacer algo como esto funciona bien...

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

 2
Author: badsector,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-05-23 22:17:37

Esta es la mejor manera de fade in/out de forma natural, primero oculta tu contenedor y luego carga tu página en este contenedor (se cargará pero se ocultará) y luego usa la función Jquery .fadeIn () y lo mostrará añadiendo el efecto especial.

$(".myClass").click(function () 
{
    $("#Container").hide();
    $("#Container").load("magasin.html");
    $("#Container").fadeIn(); 
});
 0
Author: Khan Laoji,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-08-01 14:51:44