11549 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

je souhaite animer un peu mes pages avec Jquery et le CMS SPIP. J'ai donc tenté le script maison pour au clic d'un lien faire un fadeOut, charger la page puis afficher un div en FadeIn. L'ensemble ne marche pas comme espéré, en effet mon FadeIn est inexistant et ce n'est pas fluide :

Jugez vous même dans le portfolio (site en construction et tests)
Portfolio

Voici le bout de code que j'ai intégré mais je ne suis pas convaincu de l'effet final Smiley decu
$(document).ready(function(){
$('.snapshot-link').click(function(){
    $('#outer-container').fadeOut('3000', function(){
$("#content").hide();
$("#wait").append('<div id="wait2"><img src="ajax-loader.gif" alt="chargement..."/></div>')
});
    });
});


$(window).load(function(){
$("#wait2").hide();
$('.page-content').fadeIn('5000');
});


Comment puis-je charger ma page avant qu'elle n'apparaisse ?

merci pour vos contributions
Oui le blog il faut l'oublier, je suis partie d'un framework non adapté pour spip et vraie usine à gaz... J’essaie de revoir la chose plus "simplement".
Salut,

es-tu sûre que tes 2 "fonctions" se font dans le bon ordre ?

1/ $(document).ready(function(){
2/ $(window).load(function(){

Un petit console.log devrait te donner la réponse.

Deuxième piste :

1/ Tu cache $("#content").hide();
2/ Tu affiche $('.page-content').fadeIn('5000');

Je ne sais pas si tu es en train de bosser sur ton site mais je ne trouve pas ces éléments. Il te faut peut-être revoir ces lignes. En plus tes sélecteurs sont différents, assure-toi qu'ils pointent sur le même élément.

Ju
Oui pardon je fais des corrections, des tests... Je vais voir comment corriger cela, déjà j'ai plus accès à mes articles de portfolio en tentant d'aménager une classe ajax. J'en vois pas le bout de ce site!

Je vais tester ce que tu m'as donné Smiley smile Merci