Ввод слайдов при зависании и пребывание в течение нескольких секунд

Question

Как открыть поле ввода при наведении значка, и он должен оставаться открытым в течение нескольких секунд, после чего он должен автоматически вернуться в исходное положение.

Я пробовал в css, но мне нужно сделать это с помощью jquery.

Изначально будет значок, когда происходит зависание, тогда значок должен исчезнуть, и поле ввода должно скользить.

Вот ссылка на демо, что я пробовал.

.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

Спасибо заранее !!

P.S - Мне не нужно, чтобы это было сделано с помощью CSS (даже тот эффект перехода)

Answer 1

Попробуйте это:

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

Fiddlehttp://jsfiddle.net/aVDgk/2/

Answer 2

Вы можете посмотреть на CSS Animations.