Jquery: exécution l'une après l'autre

Bonjour,

Après avoir étudié la fonction Queue de Jquery, je ne m'en sors pas...je n'arrive à rien.
Il doit y avoir un truc qui m'échappe, mais je bloque complet.

Voici mon problème.
J'ai une série de boutons pour permettant de changer de catégorie de produits.
Lorsque je clique sur un de ces boutons, je charge en Ajax la liste des produits correspondants.
Maintenant j'aimerais ajouter quelques animations:
- On cache les produits présents
- on affiche un loader
- on charge les nouveaux produits en ajax
- on affiche les nouveaux produits

Actuellement, tout ce passe en même temps et le scale à 1 à la fin ne marche pas...bien que dans ma feuille de style class "#grid-Promos li" ait bien la valeur "scale" à 0.

Voici mon code:

 // click sur un bouton catégorie
$('#filters-Promos li').click(function (e) { 

         // pour réduit la taille des produits affichés dans la page
         $("#grid-Promos li").css({
              "-webkit-transform" : "scale(0)",
              "-ms-transform" : "scale(0)",
              "-o-transform" : "scale(0)",
              "-moz-transform" : "scale(0)",
              "transform" : "scale(0)",
          });    
        
        // On affiche un loader pour faire patienter      
        $('#grid-Promos').addClass("loadingPromos");

        // on charge les nouveaux produits
        $.ajax({
            type: "POST",
            url: 'ajax_promos.php',
            data:{ rayon: $(this).attr("data-rayon") },
            dataType: 'json',
                success: function(json) { // retour de l'Ajax
                    /// on enleve le loader
                    $('#grid-Promos').removeClass("loadingPromos");
                    //on charge les nouveaux produits dans la page
                    $("#grid-Promos ul").html(json.promos);
                    // on augmentent leur taille progressivement
                    $("#grid-Promos li").css({
                        "-webkit-transform" : "scale(1)",
                        "-ms-transform" : "scale(1)",
                        "-o-transform" : "scale(1)",
                        "-moz-transform" : "scale(1)",
                        "transform" : "scale(1)"
                    }); 
                }
        });
});

Est ce que quelqu'un pourrait m'expliquer comment faire fonctionner ces actions l'une après l'autre.
J'ai essayé d'utiliser queue()....mais ca fait exactement pareil.

Merci pour votre aide

Marco