[JQuery] Script qui ne s'exécute qu'une seule fois

Sujet résolu

10 septembre 2010 à 22:54:55

Bonjour,

Ce que je veux faire c'est quand je passe la souris sur ma div, elle disparait en fondant et une autre apparait par dessus. Lorsque que je sors de la div, ca fait le contraire. Le problème c'est qu'une fois que je l'ai fait, et que je remets la souris dessus ca ne marche pas.

Voici mon code :

<html>
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){
	
	$(".1").mouseover(function(){

                alert(); /* l'alerte ne se fait même pas la 2eme fois */


		$(".1").fadeTo("slow", 0);
		$(".2").fadeTo("slow", 1);
		
	});
	
	$(".2").mouseout(function(){
	
	        $(".2").fadeTo("slow", 0);
	        $(".1").fadeTo("slow", 1);
	
	});

});
	
</script>

</head>

<body>

<div class="conteneur" style="width: 286px; height: 187px; border: red 1px solid;">


<div class="1" style="position: relative; index-z: 1; width: 286px; height: 187px; background: url(img1.jpg) no-repeat;"></div>

<div class="2" style="position: relative; bottom: 186px; index-z: 2; width: 286px; height: 187px; background: url(img2.jpg) no-repeat; display:none;"></div>

</div>

</body>
</html>

Anonyme

10 septembre 2010 à 23:23:26

$(document).ready(function(){
	$(".1").mouseover(function(){
		$(".1").fadeTo("slow", 0);
		$(".2").fadeTo("slow", 1);
	});

	$(".1").mouseout(function(){
		$(".2").fadeTo("slow", 0);
		$(".1").fadeTo("slow", 1);
	});

	$(".2").mouseover(function(){
		$(".1").fadeTo("slow", 1);
		$(".2").fadeTo("slow", 0);
	});

	$(".2").mouseout(function(){
		$(".2").fadeTo("slow", 1);
		$(".1").fadeTo("slow", 0);
	});
});

yeahsu

11 septembre 2010 à 3:26:33

.a{
position: relative; width: 286px; height: 187px; background: url("notes.png") no-repeat;
}
.b{
position: relative; bottom: 186px;  width: 286px; height: 187px; background: url("notes2.png") no-repeat; display:none;
}
.conteneur{
width: 286px; height: 187px; border: red 1px solid;
}

<div class="conteneur">
    <div class="a"></div>
    <div class="b"></div>
</div>

$(".a").css('z-index','2');
$(".b").css('z-index','1');

$(".a").mouseover(function(){
  $(".a").fadeTo("slow", 0);
  $(".b").fadeTo("slow", 1);
  $(".a").css('z-index','1');
  $(".b").css('z-index','2');
});

$(".b").mouseout(function(){
  $(".b").fadeTo("slow", 0);
  $(".a").fadeTo("slow", 1);
  $(".a").css('z-index','2');
  $(".b").css('z-index','1');
});

4rtnow

11 septembre 2010 à 10:23:18

J'y ai pensé. Je vais testé mais ca devrait marcher. Et puis double merci yeahsu, j'ai découvert la fonction css grace à toi. ^^' Je cherchais un équivalent depuis un moment. J'utilisais .addClass pour modifier mon css. Je trouve ca quand même super contraignant.

Edit : Ca marche nickel ! =) Merci !