HELP : Animation ("apparition et disparition")

Par Bessino, il y a 10 ans

Javascript

Bonjour,

j'aimerais faire une animation en jquery.

Ce que je fais

En effet j'ai créé un bloc (div) avec un background une image que j'ai nommé "back".
Dans ce bloc "back", j'ai mis deux bloc (div) un en haut (colonne-haut) et l'autre en bas (colonne-bas).
Et dans ces deux bloc "colonne-haut et colonne-bas", j'ai ajouté 4 div chacun : colonne-haut (top1, top2, top3, top4) et colonne-bas (bottom1, bottom2, bottom3, bottom4).
Ensuite, dans chacun des 4 div de chaque colonne (haut et bas), j'ai mis un bloc (div en fond gris) qui lui contient une image transparent.

<div class="back"> <!-- colonne haut --> <div class="colonne_haut"> <!-- logistique --> <div class="top1"> <div class="logistique"> <img src='image/icone/icon_logistique.png' alt='img2' /> </div> </div> <!-- offres et transactions --> <div class="top2"> <div class="offreTransaction"> <img src='image/icone/icon_offreTransaction.png' alt='img2'/> </div> </div> <!-- réclamation abonne --> <div class="top3"> <div class="reclamation"> <img src='image/icone/icon_reclamation.png' alt='img2'/> </div> </div> <!-- offres vendeurs --> <div class="top4"> <div class="offreVendeur"> <img src='image/icone/icon_offreVendeur.png' alt='img2'/> </div> </div> </div> <!-- /colonne haut --> <div class="clear"></div> <!-- colonne bas --> <div class="colonne_bas"> <!-- commisionnement --> <div class="bottom1"> <div class="commission"> <img src='image/icone/icon_commission.png' alt='img2'/> </div> </div> <!-- incident technique --> <div class="bottom2"> <div class="incidentTechnique"> <img src='image/icone/icon_incident.png' alt='img2'/> </div> </div> <!-- plv --> <div class="bottom3"> <div class="plv"> <img src='image/icone/icon_plv.png' alt='img2'/> </div> </div> <!-- sav --> <div class="bottom4"> <div class="sav"> <img src='image/icone/icon_sav.png' alt='img2'/> </div> </div> </div> <!--colonne bas --> </div>

Ce que je veux

Maintenant ce je veux faire c'est faire une animation, c'est à dire qu'au moment ou je charge ma page je peux voir l'image du div "back", donc l'image en background et juste queleque seconde après le div "back" disparait pour faire place aux 2 div à l'intérieur " colonne-haut et colonne-bas" qui eux vont afficher les 4 div du haut et bas contenant les images.

je sais qu'il faut gérer les positions avec z-index et faire une fadeIn() et fadeOut pour faire apparaitre et disparaitre. Mais je ne sais pas comment le faire sur mon code.

Ce que j'obtiens

Au début j'ai mis en position z-index 1mon div "back" contenant les 2 div "colonne-haut et colonne-bas", et les 2 div "colonne-haut et colonne-bas" contenant chacun 4 div en position z-index 0.
avec ce code pour faire l'animation :

<script type="text/javascript"> $(document).ready(function(){ $('.back')fadeIn().delay(5000).fadeOut('slow'); }); </script>

Mais ça ne m'a pas fait l'animation que je voulais, il ne m'affiche pas mon image en background sur le div "black", au lieu de ça il m'affiche directement mes 4 blocs dans les deux colonnes.
Du coup je ne sais pas qu'est ce je dois bien faire ?

1 réponse

TrimA74, il y a 10 ans
$(document).ready(function(){ $('.back').fadeIn(5000); $('.back').fadeOut('slow'); });

Essaye ça