This article describes the jquery implementation of the induction mouse animation effect of automatic elongation of the input box. Share to everyone for your reference. The implementation methods are as follows:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>jquery to realize automatic elongation of the mouse animation effect of the input box </title>
<script type= "Text/javascript" src= "/images/jquery-1.4.2.min.js" ></script>
<style type= "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:0 Auto; margin-top:100px;
}
#de
{
display:block;width:100px; height:30px; line-height:30px; Float:right; border: #b7b7b7 1px solid; padding-left:5px; border-right:0;
}
#go
{
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;
}
</style>
<script type= "Text/javascript" >
$ (function () {
$ ("#de"). MouseOver (function () {
$ ("#de"). Animate ({"width": "250px"});
}). mouseout (function () {
$ ("#de"). Animate ({"width": "100px"});
});
});
</script>
<body>
<div id= "Main" >
<div id= "ss" ><div id= "Go" >→</div><input type= "text" id= "de"/></div>
</div>
</body>
I hope this article will help you with your jquery programming.