web-dev-qa-db-fra.com

jQuery .load () avec effet fadeIn

J'essaie de charger #content d'une URL via AJAX en utilisant jQuery dans #primary. Il se charge mais ne disparaît pas. Que fais-je de 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;
    });

Merci beaucoup pour votre aide.

jqueryloadfadein
25
Gab

En fait, j'ai pu le faire en appliquant l'effet au div wrapper à la place ...

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

Juste ça:

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

Ou pour ajouter ce comportement par défaut dans la fonction load ():

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

Vous pouvez également utiliser .load () dans un effet de fondu comme celui-ci

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

4
Vijaysinh Parmar

Lorsque vous utilisez load() jQuery utilise en interne html() pour mettre à jour votre élément. Cela signifie que vous ne pouvez pas lui appliquer d'animation, car vous mettez simplement à jour la propriété innerHTML de l'élément.

À la place, vous devrez écrire votre propre demande AJAX pour obtenir le nouveau HTML, le mettre dans l'élément, puis appeler 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;
});

J'ai utilisé get() ici, mais vous pouvez tout aussi bien utiliser post() ou ajax().

De plus, juste pour noter, live() est obsolète. Vous devez plutôt utiliser delegate() ou, si vous utilisez jQuery 1.7+, on().

3
Rory McCrossan

J'ai trouvé que faire quelque chose comme ça fonctionnait bien ...

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

2
badsector

C'est le meilleur moyen de le faire apparaître/disparaître naturellement, d'abord vous cachez votre conteneur, puis vous chargez votre page dans ce conteneur (il sera chargé mais masqué) puis utilisez simplement la fonction Jquery .fadeIn () et il l'affichera en ajoutant l'effet spécial.

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