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>

Answer 1

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.