jquery - 在悬停时滑动输入并停留几秒钟

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

你可以看看 CSS Animations。