Apparition d'un fragment avec transition

Bonjour tout le monde !
Alors voila, je suis en train de faire un portfolio pour mes photos, et je cale sur plusieurs petites chose .
Mais chaque chose en son temps !

Le premier de mes petits soucis, c'est l'apparition de mes fragments .
Je m'explique .
A gauche de la page, il y'a mes catégories. On clique dessus, ça ouvre mes galeries dans un div de droite : " Content ".
Parfait, avec l'aide du script ci dessous, ca marche à merveille ! ( le premier bout c'est pour qu'une galerie soit chargé a l'ouverture du site, pas que content se retrouve vide )

// Chargement preload de la galerie d'images
				$("#content").load("fragments/paysages.html");
				
				// Chargement du fragment de la gallerie dans le div #content
				$("a.load").click(function() {
				  $("#content").load(this.href);
					return false;
				  });

Mais le problème, c'est que ca s'affiche directement, pas d'animation, pas de transition, un vielle affichage affreux en mode : Clique -> BOUM C'EST AFFICHE ! .

Alors voila, j'aimerais savoir comment essayer de rajouter une petite animation à la venu de mon fragment !
Cordialement, Loïc.

PS: je ne comprend que très peu le JS

Bonjour Loïc,
tu peux utiliser les transitions css. Ajoute une classe "hidden" à ta div content ainsi que les propriétés css suivantes:

#content {
  /* Tes propriétés */
  -webkit-transition:opacity 0.3s;
  transition:opacity 0.3s;
}

#content.hidden {opacity:0;}

Ensuite, il suffit de modifier cette classe en fonction du chargement du contenu de ta div avec Javascript:

// Chargement preload de la galerie d'images
$("#content").load("fragments/paysages.html");

// Chargement du fragment de la gallerie dans le div #content
$("a.load").click(function() {
  $("#content").attr('class','hidden'); // On masque la div
  setTimeout(function() { // On attend que la transition soit terminée pour charger le contenu
    $("#content").load(this.href,function() {
      $("#content").attr('class',''); // Quand le contenu est chargé, on affiche de nouveau de la div
    });},300);
  }
  return false;
});

La valeur de 300 correspond à la durée en millisecondes de la transition (on a indiqué 0.3s dans le css)