jQuery问题:悬停,取消悬停不起作用

Question

我遇到了问题.这是我的网站http://keironlowe.x10hosting.com/ 导航栏中移动的红线是由于下面的代码.但它没有按预期工作.我想要的是红线在悬停时变长.但是当你移开光标时回到正常尺寸,但那不能正常工作,它只能工作一次,然后你必须刷新,它不能在主链接上工作,它会变小而不是更长.救命？

<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

尝试在animate之前调用.stop():

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

编辑:如果要调整图像的大小而不是包含它的DIV.试试这个:

$(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); 
     });
});

您可能需要调整宽度和持续时间以获得所需的效果.