[jQuery] Sélectionner le dernier élément sélectionné.

Marsh Posté le 13-01-2009 à 21:53:03

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>

Reply

Marsh Posté le 13-01-2009 à 21:53:03

Reply

Marsh Posté le 20-01-2009 à 16:05:38

Pas de solution à ton probleme, mais une remarque : utilise des id comme selecteur plutot que des classes : jQuery utilise en interne document.getElementById qui est beaucoup plus rapide sinon il doit parcourir tout le DOM.

---------------
http://poemes.iceteapeche.com - http://www.simuland.net

Reply

[jQuery] Sélectionner le dernier élément sélectionné.

Sujets relatifs:

Leave a Replay