jQuery实现感应鼠标动画效果自动伸长的输入框实例
本文实例讲述了jQuery实现感应鼠标动画效果自动伸长的输入框。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>jQuery实现感应鼠标动画效果自动伸长的输入框</title>
<scripttype="text/javascript"src="/images/jquery-1.4.2.min.js"></script>
<styletype="text/css">
body
{
margin:0;padding:0;font-size:12px;
}
a:link{
color:#1553a9;text-decoration:none;
}
a:visited{
text-decoration:none;color:#1553a9;
}
a:hover{
text-decoration:none;color:#f46662;
}
a:active{
text-decoration:none;color:#f46662;
}
#main
{
width:500px;margin:0auto;margin-top:100px;
}
#de { display:block;width:100px;height:30px;line-height:30px;float:right;border:#b7b7b71pxsolid;padding-left:5px;border-right:0; } #go { width:30px;float:right;height:22px;border:#b7b7b71pxsolid;border-left:0;padding-top:10px;padding-left:15px;background-color:#464646;cursor:pointer;color:#FFFFFF; } </style> <scripttype="text/javascript"> $(function(){
$("#de").mouseover(function(){ $("#de").animate({"width":"250px"}); }).mouseout(function(){ $("#de").animate({"width":"100px"}); }); }); </script> </head> <body> <divid="main"> <divid="ss"><divid="go">→</div><inputtype="text"id="de"/></div> </div> </body> </html>