Javascript或jQuery帮助

这是我的网站： http ： //keironlowe.x10hosting.com/

我需要知道如何在hover时让红线慢慢变长，然后使用javascript或jQuery慢慢收缩回正常大小。

有人能告诉我一些正确的方向吗？

Answer 1

您可以使用jQuery的animate对元素执行某些操作，其中包含一个duration参数，用于定义动画完成所需的时间。 然后是hoverfunction，它具有一组function。 所以这是一般的想法：

 $('div', '#nav_container').hover(function() { // this gets called on hover $(this).animate({width: 'XXXpx'}, 10000); // 10000 = 10 seconds }, function() { // this gets called on mouseout $(this).animate({width: 'XXXpx'}, 10000); // 10000 = 10 seconds }); 

编辑 ：

就你的评论而言，如果代码在 ，你需要将代码包装在document.ready ：

 $(document).ready(function() { // put the code you tried here }); 

Answer 2

像这样的东西：

 $('#nav_container div').hover( function(){$(this).find('img').animate({width:'100%'},{queue:false,duration:500});}, function(){$(this).find('img').animate({width:'auto'},{queue:false,duration:500});} );