Forums

kelvinseasons

I'm trying simple fade in / out effects on hover over "li" ...it works but it just keeps repeating (fadein/out) when i keep my mouse over them.

Also, how can i make the effects so the 'li' that i hover will only have the animation instead of the entire 'li'


<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<link rel=\"stylesheet\" type=\"text/css\" href=\"default.css\" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>

<title>Sliding Door menu Example</title>
</head>
<script type=\"text/javascript\">
$(document).ready(function() {

	$('ul li').hover(function() { 
		$(this).fadeOut() ; 
		}, function() { 
		$(this).fadeIn(); }
		);
});
</script>

<body>
	<div id=\"wrapper\">
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div><!-- end wrapper -->
</body>
</html>

Sumeet Chawla

Hello,
Yeah, it will repeat the animation if you hover over it for a number of times in a short span. To prevent this just use a stop() function before calling the fadein/fadeout function


 $(this).stop().fadeOut() ;

try assigning some classes then it might move only the li you hover on.. But the code looks fine to me.. it should only animate the item on which you hover... What exactly is happening?

treehouse : what would you like to learn today?

Forums

When hover, fadein/out just repeats