2xyo 2*yo = yoyo | Bonjour,
J'ai réalisé un menu avec 2 panneau, un en haut et un en bas chacun composés de 3 div. Les div apparaissent successivement (les un après les autres). Jusque là pas de problème. (quoi que ma méthode est sans doute crade)
Je fais ensuite apparaître des informations subsidiaires au centre lors du survol des div. Chaque survol d'un div fait doit faire apparaître un paragraphe au centre et par conséquent faire également disparaître le paragraphe qui était affiché avant. J'arrive à afficher le paragraphe au survol de la div (glissement à partir de la droite vers le centre) mais je n'arrive pas à faire disparaître (glissement du centre vers la gauche) le paragraphe qui était affiché. De plus, l'affichage ne fonctionne qu'une fois..
Je suis preneur d'infos et de liens vers la bonne page de la doc...
Merci
Code :
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
- "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <script src="http://code.jquery.com/jquery-latest.js"></script>
-
- <script>
- $(document).ready(function(){
-
- function runIt() {
- $(".a" ).show("slow" ).animate({left:'+=15%'},1000);
- $(".d" ).show("slow" ).animate({right:'+=15%'},1000);
-
- $(".b" ).show("slow" ).animate({left:'+=15%'},1000).animate({left:'+=30%'},1000);
- $(".e" ).show("slow" ).animate({right:'+=15%'},1000).animate({right:'+=30%'},1000);
-
- $(".c" ).animate({left:'+=15%'},1000).animate({left:'+=30%'},1000).show("slow" ).animate({left:'+=30%'},1000);
- $(".f" ).animate({right:'+=15%'},1000).animate({right:'+=30%'},1000).show("slow" ).animate({right:'+=30%'},1000);
-
- }
- runIt();
- $("div" ).mouseover(function(){
- if($(this).next("p" ).is(":hidden" )){
- $(this).next("p" ).css({'z-index' :'0'});
- $(this).next("p" ).show().animate({right:'+=50%'},2000);
- }
- if($(this).next("p" ).is(":visible" )){
- $(this).next("p" ).show().animate({bottom:'+=10%'},2000);
- }
- });
- });
- </script>
- <style>
- .a { width:10%; height:10%;
- position:absolute; left:0px; top:30px;
- background:green; display:none; z-index: 3;}
- .b { width:10%; height:10%;
- position:absolute; left:0px; top:30px;
- background:red; display:none; z-index: 2;}
- .c { width:10%; height:10%;
- position:absolute; left:0px; top:30px;
- background:blue; display:none; z-index: 1;}
- .d { width:10%; height:10%;
- position:absolute; right:0px; bottom:30px;
- background:green; display:none; z-index: 3;}
- .e { width:10%; height:10%;
- position:absolute; right:0px; bottom:30px;
- background:red; display:none; z-index: 2;}
- .f { width:10%; height:10%;
- position:absolute; right:0px; bottom:30px;
- background:blue; display:none; z-index: 0;}
- .item {color:black;}
- p{position:absolute;right:0px;display:none;top:45%;background:white;}
- </style>
- </head>
- <body>
- <div class="a"><p class="item">Blog</p></div>
- <p>AAAAAA</p>
- <div class="b"><p class="item">wiki</p></div>
- <p>BBBBBBBBBBBBB</p>
- <div class="c"></div>
- <p>ccccccccccccc</p>
- <div class="d"></div>
- <p>ddddddd dddd</p>
- <div class="e"></div>
- <p>eeeeeeeeeeeeBBBBBBBBBBBBB</p>
- <div class="f"></div>
- <p>fffffffffffffffff</p>
- </body>
- </html>
|
|