11544 sujets

JavaScript, DOM et API Web HTML5

Fonction (trop) simple, fonction qui plante

Bonsoir,
après quelques temps sans avoir codé je m'y remets petit à petit et je dois prendre jQuery par la base.
J'essaie, du coup, de faire au plus simple mais c'est visiblement trop simple.

Lors du survol de l'élément nav, je fait apparaitre une div positionnée dessous.
Jusque là, ça va.

Le problème c'est que dans le nav j'ai un ul contenant 3 li qui, au survol, font boucler la fonction :

    <body>
		<nav>
			<ul id="cbmi">
				<li id="bm1" class="bmi"></li>
				<li id="bm2" class="bmi"></li>
				<li id="bm3" class="bmi"></li>
			</ul>
		</nav>
	        <div id="deroule"></div>
    </body>



* {
	margin:0;
	padding:0;
	text-decoration:none;
	list-style:none;
} 

html,
body {
	background:#fff;
	height: 100%;
}

#globale {
    height: 100%;
    width: 100%;
}

nav {
	background:#d7f;
	bottom: auto;
    color: white;
    display: block;
    height: 100%;
    position: absolute;
    right: auto;
    top: 0;
    width: 60px;
    z-index: 10;
	
	transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1) 0s;
}
	nav ul#cbmi {
		background:#425;
		position: absolute;
		width:60px;
		height:195px;
		top:50%;
		margin:-97.5px 0 0 0;
	}
		nav ul#cbmi li.bmi {
			width: 60px;
			height: 60px;
		}

	div#deroule{
		background: #dbc;
		position: absolute;
		width: 120px;
		left: -60px;
		height: 100%;
		z-index: 5;
	}
	nav:hover div#deroule{
		left: 60px;
	}
	
	div#deroule ul#cc{
		position: absolute;
		height:195px;
		top:50%;
		margin:-97.5px 0 0 0;
	}



<script type="text/javascript">		
	$(document).ready(function(){
		$('nav').mouseover(function() {
			$('#deroule').animate({
				left : "60px"
			  },500);
		});
		$('nav').mouseout(function() {
			$('#deroule').animate({
				left : "-60px"
			  },500);
		});
	});
</script>


Je suppose que le problème est simple mais je n'ai sans doute pas encore les bons réflexes.
Merci d'avance pour toute aide apportée.
Modifié par mousse (13 Apr 2013 - 01:56)
essaie avec `mouseenter`.

Mais, ce serait plus utile si tu créais un exemple fonctionnel sur JSBin ou JSFiddle ou un autre.
Exact, j'avais essayé mouseenter avec mouseover...

Merci.

Mais encore une question : si je fais entrer et sortir le curseur plusieurs fois dans la zone d'action la fonction s’accomplit jusqu’à atteindre le nombre de fois où le curseur est entré dans la zone, y a t-il un moyen de l'éviter ?
Sujet clos
Aller à