Créer une transition javascript

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Créer une transition javascript

Message par Oyo Ven 2 Déc 2011 - 8:59

Bonjour et merci de prendre le temps de lire mon problème.

Actuellement, je suis en train de créer une page d'accueil pour mon forum qui se veut assez "spéciale" et qui fonctionne pour l'instant qu'avec du CSS3 (les transitions) et un spamme de overflow: hidden, mais là n'est pas le problème.

J'ai actuellement créé l'interface en me servant d'un tableau qui affiche quatre images dans deux colonnes alignées sur deux lignes.
Créer une transition javascript Imagep10

Quand je passe ma souris sur une des quatre images, un div monte et m'affiche du texte, des liens ou des images.
Créer une transition javascript Imagep11
J'ai mis ce système en place grâce à un padding-top de la hauteur de l'image, d'un overflow-hidden et d'une séquence de transition CSS3. Lorsque je passe ma souris (:hover sur le div), le padding-top revient à 0 et le div monte lentement pour afficher son contenu, en suivant bien les border de l'image. Jusque là, je n'ai pas de soucis. Tout fonctionne parfaitement et même si la façon de faire n,est sans doute pas la meilleure, je n'ai pas besoin d'aller prendre des codes sur n'importe quel autre forum pour y arriver (home-made).

Par contre, lorsque le "div" est remonté et correctement affiché, un span permet d'afficher un div par-dessus, assez grand et qui recouvre entièrement les quatre images. J'y suis parvenu en bidouillant un petit n'importe quoi trouvé sur le net (ouais, mes notions sont vraiment pas superbes en javascript). Résultat, lorsque j'appuie sur le "div" en question (dans l'exemple c'est "afficher le tableau CONTEXTE") je parviens à faire afficher mon tableau.
Créer une transition javascript Imagep12

Là pour l'instant, tout est parfaitement dans mes cordes. J'arrive à faire ce que je veux, même si le moyen d'y parvenir est peut-être "grossier".

SEULEMENT. Le code que j'utilise actuellement est très basique et affiche mon "tableau" d'un seul coup, sans transition et sans quoique ce soit. Personnellement, je trouve pas ça très esthétique et je suis ici pour demander à ceux qui s'y connaissent mieux que moi en Javascript s'il ne serait pas possible d'afficher ne serait-ce qu'un FadeIn en jQuery ou un truc dans le genre pour l'apparition du tableau.
Code:
table = {
      show: function(elem) {
         document.getElementById(elem).style.display = 'block';
      },
      hide: function(elem) {
         document.getElementById(elem).style.display = 'none';
      }
   }

Voici mon code Javascript qui me permet de faire apparaitre et disparaitre mes tableaux correspondants aux images. Comme on le voit, c'est très basique. J'ai essayé de voir s'il était possible de placer des transition CSS3 mais ça ne fonctionne pas.

Pour appeler le script, je dois me servir d'une formule qui n'est pas trop compliquée.
Code:
<span onClick="table.show('pa_contexte')">afficher le tableau CONTEXTE</span>
et pour le faire partir c'est pareil.
Code:
onClick="table.hide('pa_contexte')"

Seulement voilà, j'aimerais beaucoup d'une transition quelconque. Une apparition vers la droite ou la gauche en dégradé d'opacité ou quelque chose dans le genre.
J'ai cru trouvé ici une function permettant quelque chose de simple, mais je ne sais pas du tout comment l'utiliser : http://api.jquery.com/animate/


Sur ce, j'espère que tout le monde m'aura compris et qu'on pourra trouver une issus à mon problème bénin. Si ce n'était que pour moi seul je garderais l'apparition du tableau tel quel, mais comme il s'agit d'un forum public, que des membres y naviguerons, je souhaite quand même donner le meilleur possible. ♥
Merci d'avance,
Oyo.


Dernière édition par Oyo le Ven 2 Déc 2011 - 21:14, édité 1 fois
Oyo

Oyo
****

Masculin
Messages : 251
Inscrit(e) le : 24/12/2005

Oyo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer une transition javascript

Message par zz10 Ven 2 Déc 2011 - 10:13

Bonjour,

Peut-être qu'avec ceci ?

Code:
table = {
   show: function(elem) {
      jQuery(elem).animate({width:'toggle'},1200);
   },
   hide: function(elem) {
      jQuery(elem).animate({width:'toggle'},1200);
   }
}
zz10

zz10
Membre actif

Masculin
Messages : 2279
Inscrit(e) le : 04/07/2009

http://www.ice-epinal-forum.com
zz10 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer une transition javascript

Message par Oyo Ven 2 Déc 2011 - 10:25

Bonjour, merci d'avoir répondu.

J'ai essayé le code mais il ne fonctionne pas. Le problème vient peut-être du fait que le "css" n'est pas modifié et que le tableau reste en display: none (propriété donnée de base).

J'ai essayé ceci
Code:
table = {
  show: function(elem) {
      jQuery(elem).animate({display:'block'},1200);

  },
  hide: function(elem) {
      jQuery(elem).animate({display:'none'},1200);

  }
}
croyant que le javascript pourrait fonctionner comme les transitions de CSS3 (1200 étant un temps de transition non ?). En tout cas, ça ne fonctionne pas non plus. Même que le tableau n'apparait plus du tout. =/
Oyo

Oyo
****

Masculin
Messages : 251
Inscrit(e) le : 24/12/2005

Oyo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer une transition javascript

Message par zz10 Ven 2 Déc 2011 - 11:02

La fonction animate de jquery s'occupe de gérer les propriétés CSS display. D'où la force de jQuery Smile

Sinon, essayez avec ce code car j'ai fait une erreur plus haut :

Code:
 table = {
          show: function(elem) {
              document.getElementById(elem).animate({width:'toggle'},1200);
          },
          hide: function(elem) {
              document.getElementById(elem).animate({width:'toggle'},1200);
          }
        }
zz10

zz10
Membre actif

Masculin
Messages : 2279
Inscrit(e) le : 04/07/2009

http://www.ice-epinal-forum.com
zz10 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer une transition javascript

Message par Oyo Ven 2 Déc 2011 - 11:09

Bonjour,

Je viens d'essayer à l'instant, en vérifiant bien que mon déclenchement "onClick" était toujours là (eh oui, je bidouille depuis des heures à trouver une solution) et ça ne fonctionne toujours pas.
Peut-être qu'il y a interférence entre ma mise en page et mon css ? Je colle ici pour qu'on puisse vérifier, sinon je ne vois pas d'où le problème peut venir.

Code:
/* PAGE D'ACCUEIL CODES ON */
.citations { color: #70392d; font-family: georgia; font-style: italic; font-weight: normal; font-size: 24px; line-height: 85%; letter-spacing: -1px; text-shadow: 0px 1px 1px #747064; position: absolute; z-index: 999; margin-top: -63px; width: 916px; }

.topleft { background: url(http://i44.servimg.com/u/f44/16/34/55/88/toplef10.png); width: 392px; height: 192px; border: 4px solid #6d5f3a; float: left; margin-right: -15px; overflow: hidden; -moz-transition: all 1s ease; -webkit-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.topright { background: url(http://i44.servimg.com/u/f44/16/34/55/88/toprig10.png); width: 392px; height: 192px; border: 4px solid #4d6e29; float: right; margin-left: -15px; overflow: hidden; -moz-transition: all 1s ease; -webkit-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.bottomleft { background: url(http://i44.servimg.com/u/f44/16/34/55/88/bottom10.png); width: 392px; height: 190px; border: 4px solid #167062; float: left; margin-right: -15px; overflow: hidden; -moz-transition: all 1s ease; -webkit-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.bottomright { background: url(http://i44.servimg.com/u/f44/16/34/55/88/bottom11.png); width: 392px; height: 190px; border: 4px solid #713462; float: right; margin-left: -15px; overflow: hidden; -moz-transition: all 1s ease; -webkit-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.bottomright:hover, .bottomleft:hover, .topleft:hover, .topright:hover { border: 4px solid #747064; }

.topbox { height: 192px; padding-top: 192px; opacity: 0.2; filter: alpha(opacity=20); -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; }
.topbox:hover { padding-top: 0; opacity:0.9; filter: alpha(opacity=90); }
.topcontent { background: #d6d5c7; height: 192px; }

.bottombox { height: 190px; padding-top: 190px; opacity: 0.2; filter: alpha(opacity=20); -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; }
.bottombox:hover { padding-top: 0; opacity:0.9; filter: alpha(opacity=90); }
.bottomcontent { background: #d6d5c7; height: 190px; }

.pa_box { width: 828px; height: 419px; overflow: hidden; }
#pa_accueil { position: absolute; width: 828px; height: 423px; margin: auto;  }
#pa_contexte { position: absolute; width: 828px; height: 423px; margin: auto; display: none; background: #d6d5c7; -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px; }
#pa_annonces { position: absolute; width: 828px; height: 423px; margin: auto; display: none; }
#pa_predefinis { position: absolute; width: 828px; height: 423px; margin: auto; display: none; }
#pa_staff { position: absolute; width: 828px; height: 423px; margin: auto; display: none; }
/* PAGE D'ACCUEIL CODES OFF */

Code:
<div class="pa_box">
<table width="100%" id="pa_accueil">

<tr>

<td><div class="topleft"><div class="topbox"><div class="topcontent"><span onClick="table.show('pa_contexte')">afficher le tableau CONTEXTE</span></div></div>    </div></td>

<td><div class="topright"><div class="topbox"><div class="topcontent">blablabla</div></div>    </div></td>

</tr>

<tr><td colspan="2"><br></td></tr>

<tr><td><div class="bottomleft"><div class="bottombox"><div class="bottomcontent">blablabla</div></div>    </div></td>

<td><div class="bottomright"><div class="bottombox"><div class="bottomcontent">blablabla</div></div>    </div></td></tr></table>




<table width="100%" id="pa_contexte" onClick="table.hide('pa_contexte')"><tr><td>contexte</td></tr></table>



<table width="100%" id="pa_annonces"><tr><td>annonces</td></tr></table>



<table width="100%" id="pa_predefinis"><tr><td>predefinis</td></tr></table>



<table width="100%" id="pa_staff"><tr><td>staff</td></tr></table>


</div>

Merci encore pour l'intervention.

EDIT : En essayant mes scripts et mes tentatives sur http://jsbin.com/ , j'ai réussis à obtenir un résultat en entrant ce code. Quand on clique sur le texte qui apparait lorsqu'on survole une image, le boite s'ouvre et lorsqu'on reclique sur la "boite" elle se referme d'elle même. Le seul problème, c'est que j'ai beau essayer d'intégrer le script tel quel dans ma page d'accueil, ou au pire dans une page html appelée en iframe : RIEN. Je ne vois vraiment pas d'où peut venir le problème pourtant.
Code:
<!DOCTYPE html>
<html>
<head>
  <style>
/* PAGE D'ACCUEIL CODES ON */
.citations { color: #70392d; font-family: georgia; font-style: italic; font-weight: normal; font-size: 24px; line-height: 85%; letter-spacing: -1px; text-shadow: 0px 1px 1px #747064; position: absolute; z-index: 999; margin-top: -63px; width: 916px; }

.topleft { background: url(http://i44.servimg.com/u/f44/16/34/55/88/toplef10.png); width: 392px; height: 192px; border: 4px solid #6d5f3a; float: left; margin-right: -15px; overflow: hidden; -moz-transition: all 1s ease; -webkit-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.topright { background: url(http://i44.servimg.com/u/f44/16/34/55/88/toprig10.png); width: 392px; height: 192px; border: 4px solid #4d6e29; float: right; margin-left: -15px; overflow: hidden; -moz-transition: all 1s ease; -webkit-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.bottomleft { background: url(http://i44.servimg.com/u/f44/16/34/55/88/bottom10.png); width: 392px; height: 190px; border: 4px solid #167062; float: left; margin-right: -15px; overflow: hidden; -moz-transition: all 1s ease; -webkit-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.bottomright { background: url(http://i44.servimg.com/u/f44/16/34/55/88/bottom11.png); width: 392px; height: 190px; border: 4px solid #713462; float: right; margin-left: -15px; overflow: hidden; -moz-transition: all 1s ease; -webkit-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.bottomright:hover, .bottomleft:hover, .topleft:hover, .topright:hover { border: 4px solid #747064; }

.topbox { height: 192px; padding-top: 192px; opacity: 0.2; filter: alpha(opacity=20); -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; }
.topbox:hover { padding-top: 0; opacity:0.9; filter: alpha(opacity=90); }
.topcontent { background: #d6d5c7; height: 192px; }

.bottombox { height: 190px; padding-top: 190px; opacity: 0.2; filter: alpha(opacity=20); -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; }
.bottombox:hover { padding-top: 0; opacity:0.9; filter: alpha(opacity=90); }
.bottomcontent { background: #d6d5c7; height: 190px; }

.pa_box { width: 828px; height: 419px; overflow: hidden; }
#pa_accueil { position: absolute; width: 828px; height: 423px; margin: auto;  }
#pa_contexte { position: absolute; width: 828px; height: 429px; margin: auto; display: none; background: #d6d5c7; -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px; margin-top: 1px; }
#pa_annonces { position: absolute; width: 828px; height: 429px; margin: auto; display: none; background: #d6d5c7; -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px; margin-top: 1px; }
#pa_predefinis { position: absolute; width: 828px; height: 429px; margin: auto; display: none; background: #d6d5c7; -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px; margin-top: 1px; }
#pa_staff { position: absolute; width: 828px; height: 429px; margin: auto; display: none; background: #d6d5c7; -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px; margin-top: 1px; }
/* PAGE D'ACCUEIL CODES OFF */
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
 
 
  <script>
 /* ouverture du contexte on */
    $(".open_contexte").click(function () {
        $("#pa_contexte").toggle(300);
    });
 /* ouverture du contexte off */

   
   
 /* ouverture du annonces on */
    $(".open_annonces").click(function () {
        $("#pa_annonces").toggle(300);
    });
 /* ouverture du annonces off */
   
   
 /* ouverture du predefinis on */
    $(".open_predefinis").click(function () {
        $("#pa_predefinis").toggle(300);
    });
 /* ouverture du predefinis off */
   
   
 /* ouverture du staff on */
    $(".open_staff").click(function () {
        $("#pa_staff").toggle(300);
    });
 /* ouverture du staff off */
   
   
</script>
 
 
</head>
<body>
 
 
<div class="pa_box">
<table width="100%" id="pa_accueil">

<tr>

<td><div class="topleft"><div class="topbox"><div class="topcontent"><span class="open_contexte">afficher le tableau CONTEXTE</span></div></div>    </div></td>

  <td><div class="topright"><div class="topbox"><div class="topcontent"><span class="open_annonces">afficher les annonces</span></div></div>    </div></td>

</tr>

<tr><td colspan="2"><br></td></tr>
 
 

<tr>
    <td><div class="bottomleft"><div class="bottombox"><div class="bottomcontent"><span class="open_predefinis">afficher le tableau des prédéfinis</span></div></div>    </div></td>

<td><div class="bottomright"><div class="bottombox"><div class="bottomcontent"><span class="open_staff">afficher le tableau des membres du staff</span></div></div>    </div></td>
 

</tr></table>




<table width="100%" id="pa_contexte" class="open_contexte"><tr><td>contexte</td></tr></table>



<table width="100%" id="pa_annonces"><tr><td class="open_annonces">annonces</td></tr></table>



<table width="100%" id="pa_predefinis"><tr><td class="open_predefinis">predefinis</td></tr></table>



<table width="100%" id="pa_staff"><tr><td class="open_staff">staff</td></tr></table>


</div>

 
</body>
 
</html>
Oyo

Oyo
****

Masculin
Messages : 251
Inscrit(e) le : 24/12/2005

Oyo a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum