在悬停时滑动输入，并保持几秒钟 [英] Slide input on hover and stay for few seconds

问题描述

如何在悬停图标时打开输入框，它应该保持打开几秒钟，然后应该自动滑回到初始位置。

在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和Chrome * / 
 -o-transition：width 1s; / * Opera * / 
 -ms-transition：width 1s; / * IE9（maybe）* / 
 vertical-align：top; 
 overflow：hidden 
} 
 .media：hover {
 width：25％; 
} 
  

FIDDLE

提前感谢！

解决方案

请尝试以下方法：

p>

 < script> 
 $（'。media'）。mouseenter（function（）{
 $（'img'）。hide（）; 
 $ '）; 
}）; 
 $（'。media'）。mouseleave（function（）{
 setTimeout（function（）{
 $（'media'）。width（'6％'）; 
 setTimeout（function（）{$（'img'）。show（）}，1000）; 
}，3000）; 
} 
< / script> 
  

小提琴 http://jsfiddle.net/aVDgk/2/

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)

解决方案

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/

这篇关于在悬停时滑动输入，并保持几秒钟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！