Discussion :

[DrWilly]

Bonjour à tous !

Dans un site, j'utilise la fonction $.Ajax pour afficher les commentaires de mes articles. l'utilisateur peux ainsi afficher 4 par 4 les commentaires de l'article sans pour autant recharger à chaque fois la page.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
$(".link_com").click(function() {
	 $.ajax({ 
        type: "GET", 
        url: $(this).attr("href"), 
        success: function(retour){    
			$(".ajax_com").empty().append(retour); 			
        } 
    }); 
    return false; 
});

Ici, link_com est la classe css associée à tous les liens visant les différentes pages de commentaires et ajax_com est la classe associée au conteneur dans lequel je veux afficher les commentaires contenu dans la page ciblée par$(this).attr("href").

Jusque là aucun problème tout s'affiche correctement.

Maintenant, pour éviter que le chargement des commentaires se fasse trop brutalement, j'aimerai bien effectuer un effet fadeOut sur les commentaires qui disparaissent et un effet fadeIn sur les commentaires qui apparaissent.

Mais ou placer ces insctruction ?!
Ou peut on faire un callback dans la fonction $.Ajax où je pourrais mettre mon fadeIn et quand mettre le fadeOut ?

J'ai essayé un truc du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
$(".link_com").click(function() {
        $(".ajax_com").fadeOut("slow");
	 $.ajax({ 
        type: "GET", 
        url: $(this).attr("href"), 
        success: function(retour){    
			$(".ajax_com").empty().append(retour);
                        $(".ajax_com").fadeIn("slow");
 
        } 
    }); 
    return false; 
});

mais ça ne marche évidemment pas... Les deux effets s'effectuent l'un juste après l'autre, après que les commentaires se soit affichés.

Une idée ?
merci !

[Kerod]

As-tu regardé la documentation officielle de jQuery ?
Elle en parle

[DrWilly]

Personnellement, je consulte http://jquery.developpeur-web2.com/ et il me dirige vers les options beforeSend et complete.

D'où un code du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
$(".link_com").click(function() { 
	$.ajax({ 
        type: "GET", 
        url: $(this).attr("href"),
        success: function(retour){ 
 
			$(".ajax_com").empty().append(retour); 
			$(".ajax_com").fadeIn("slow");
 
        }, 
		beforeSend: function(retour){ 
			$(".ajax_com").fadeOut("slow"); 
		},
		complete: function(retour){ 
			$(".ajax_com").fadeIn("slow"); 
		}
    }); 
    return false; 
});

Le problème c'est que ça me fait exactement la même chose. (apparition d'abord des commentaires puis les deux effets s'enchainent).

Mais en plus il y a un très disgracieux décalage de la page qui se met au niveau du lien lors du clic...

Je m'y prend mal ? Une meilleure idée ?

[danielhagnoul]

Bonsoir.

Essayer :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
$(".link_com").click(function() {
    $(".ajax_com").fadeOut("slow", function(){
         $.ajax({ 
            type: "GET", 
            url: $(this).attr("href"), 
            success: function(retour){    
                $(".ajax_com").empty().append(retour);
            },
            complete: function(retour){ 
                $(".ajax_com").fadeIn("slow"); 
            }
        }); 
    });
 
    return false; 
});