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>

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.

Answer 2

Hi there,

its easy to fix mate.

write the following in the script tag:

$(document).ready(function() {
        $('.box').hover(
          function() {
              $(this).css({ background: 'blue' });
          },
          function() {
              $(this).css({ background: 'black' });
          }
        );
    });

and write the following mark up and you should have your hover smiling at you

<div class="box"></div>

Answer 3

oops forgot to mention; writing multiple selectors in jquery is like

('selector1, selector2, ...')

which you have mistakenly have written like:

$('div', '#nav_container').hover(function() {....

hope this helps

Answer 4

Thanks alot guys, info was fantastic