本文实例讲述了jQuery实现感应鼠标动画效果自动伸长的输入框。分享给大家供大家参考。具体实现方法如下: 复制代码 代码如下: jQuery实现感应鼠标动画效果自动伸长的输入框 <br /> body<br /> {<br /> margin:0; padding:0; font-size:12px;<br /> }<br /> a:link {<br /> color:#1553a9; text-decoration: none;<br /> }<br /> a:visited {<br /> text-decoration:none; color: #1553a9;<br /> }<br /> a:hover {<br /> text-decoration:none; color: #f46662;<br /> }<br /> a:active {<br /> text-decoration: none; color:#f46662;<br /> }<br /> #main<br /> {<br /> width:500px; margin:0 auto; margin-top:100px;<br /> } <p>#de<br /> {<br /> display:block;width:100px; height:30px; line-height:30px; float:right; border:#b7b7b7 1px solid; padding-left:5px; border-right:0;<br /> }<br /> #go<br /> {<br /> width:30px; float:right;height:22px; border:#b7b7b7 1px solid; border-left:0; padding-top:10px; padding-left:15px; background-color:#464646; cursor:pointer; color:#FFFFFF;<br /> }<br /> <br /> $(function(){ <p>$("#de").mouseover(function(){<br /> $("#de").animate({"width":"250px"});<br /> }).mouseout(function(){<br /> $("#de").animate({"width":"100px"});<br /> });<br /> });<br /> → 希望本文所述对大家的jQuery程序设计有所帮助。