jQuery problem: hover, un-hover not working

Question

Im having a problem. This is my website http://keironlowe.x10hosting.com/ The red lines that move in the navigation bar is due to this code below. But its not working as intended. What I want is is is for the red lines to get longer on hover. But go back to normal size when you move the cursor away, but thats not working properly, it only works once and then you have to refresh, and it doesnt work on the home link and It gets smaller instead of longer. Help?

<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('div', '#nav_container').hover(function() {
    $(this).animate({width: '220px'}, 1000);      
}, function() {
    $(this).animate({width: '300px'}, 1000); 
});
});
</script>

Solution

Try calling .stop() before animate:

$(document).ready(function() {
  $('div', '#nav_container').hover(function() {
    $(this).stop();
    $(this).animate({width: '220px'}, 1000);      
  }, function() {
    $(this).stop();
    $(this).animate({width: '300px'}, 1000); 
  });
});

EDIT: If you want to resize the image instead of the DIV where it is contained. Try this:

$(document).ready(function() {
     $('#nav_container div').hover(function() {
        $(this).children('img').stop().animate({width: '220px'}, 1000);      
     }, function() {
        $(this).children('img').stop().animate({width: '300px'}, 1000); 
     });
});

You may need to adjust the widths and the duration to get your desired effect.

Comments

[Jose Basilio]

This question is a follow-up to stackoverflow.com/questions/966084/javascript-or-jquery-help

[Keiron Lowe]

Thats got the hover on and off issue fixed. But ive realized it resizes the DIV not the img (Nav_Line.png) it still gets smaller, needs to refresh to work more than once and home doesnt work. Anymore adivce? :)

[Keiron Lowe]

Right its working perfectly! Just for some reason, Home and About lines are different height from Portfolio and contact

[Jose Basilio]

It's probably something with your master.css file

[ichiban]

You should be editing your previous answer. Not posting another answer. -1

[techdude]

Thanks. Always, forget the $.fn.stop().