efectos - jquery animate opacity

jQuery.load() con efecto fadeIn

Question

Estoy intentando cargar #content 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.

Answer 1

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

En su lugar, deberá escribir su propia solicitud de AJAX para obtener el nuevo HTML, colocarlo 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;
});

Utilicé get() aquí, pero también podrías usar post() o ajax() .

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

Answer 2

De hecho, pude hacerlo aplicando el efecto al envoltorio div ...

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

Answer 3

Esta es la mejor manera de atenuarla / inactivarla de forma natural, primero oculta su contenedor, luego carga su página en este contenedor (se cargará pero se ocultará), luego use la función Jquery .fadeIn () y la mostrará. El efecto especial.

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

Answer 4

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

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

Answer 5

Sólo esta:

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

O para agregar este comportamiento como predeterminado en la función load ():

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

Answer 6

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

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