jquery - Slide input on hover and stay for few seconds -

how open input box on hover icon , should stay open few seconds should automatically slide initial position.

i have tried in css need using jquery.

initially there icon when hover happens icon should disappear , input box should slide.

here link demo have tried.

.media{     width:6%;     background:yellow;     height:26px;     cursor:pointer;     display:inline-block;     transition: width 1s;     -moz-transition: width 1s; /* firefox 4 */     -webkit-transition: width 1s; /* safari , chrome */     -o-transition: width 1s; /* opera */     -ms-transition: width 1s; /* ie9 (maybe) */     vertical-align:top;     overflow:hidden } .media:hover{     width:25%; } 

fiddle

thanks in advance!!

p.s - dont need done css (even transition effect)

try this:

<script>     $('.media').mouseenter(function(){         $('img').hide();         $('.media').width('25%');     });     $('.media').mouseleave(function(){         settimeout(function(){             $('.media').width('6%');             settimeout(function(){$('img').show()},1000);         },3000);     }); </script> 

fiddle http://jsfiddle.net/avdgk/2/