Forums

attilahajzer

How come this doesn't work!!

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#nav ul li").mouseover(function(){
    $("a").animate({left:10},"fast");
  });
  $("nav").mouseout(function(){
    $("a").animate({left:0},"fast");
  });
});
</script> 
</head>
 
<body>
<div id="nav">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Mission</a></li>
		<li><a href="#">Media</a></li>
		<li><a href="#">Links</a></li>
		<li><a href="#">Contact</a></li>
		<li><a href="#">Affiliates</a></li>
		<li><a href="#">Support</a></li>
	</ul>
</div>
</body>
</html>

clokey2k

In the demo code given there is no CSS. If the 'a' element does not have 'position: relative' it cannot move.

Also when you mouse over the element you then end up targeting ALL 'a' elements. For mouseout you may want to chain events.

This code *might* work (providing that 'a' elements are relatively positioned):

$(document).ready(function(){
  $("#nav ul li a").mouseover(function(){
    $(this).animate({left:10},"fast")
   }).mouseleave(function(){
    $(this).animate({left:0},"fast")
  });
});

You may be able to achieve this better in CSS alone too. Just a thought!

treehouse : what would you like to learn today?

Forums

jQuery nav animate!