Slide input on hover and stay for few seconds

问题

How to open the input box on hover an icon and it should stay open for few seconds then it should automatically slide back to the initial position.

I have tried in css but I need to do this using jquery.

Initially there will be an icon when hover happens then icon should disappear and input box should slide.

Here is the link for the demo what I 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 and 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 - I dont need this to be done with CSS (even that transition effect)

回答1:

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/