在懸停時滑動輸入並保持幾秒鐘

如何打開懸停圖標時的輸入框，它應該保持打開幾秒鐘，然後它應該自動滑回到初始位置。在懸停時滑動輸入並保持幾秒鐘

我試過在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完成（甚至是過渡效果）

來源

2013-05-06 Sowmya

你想http://jsfiddle.net/aVDgk/3/ – sandeep 2013-05-06 13:39:43

@sandeep我想這是我的網頁上，但它不工作這因爲某些原因。你可以請chk這個http://jsfiddle.net/aVDgk/4/ – Sowmya 2013-05-06 13:44:19

你沒有更新CSS和混合jQuery。檢查http://jsfiddle.net/aVDgk/5/ – sandeep 2013-05-06 13:56:37

試試這個：

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

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

來源

2013-05-06 10:18:03

謝謝，但主要的是，它應該停留幾秒鐘時，鼠標出 – Sowmya 2013-05-06 10:47:34

檢查上述我做了更改，我只添加'Settimeout函數''mouseleave' – 2013-05-06 11:08:17

不能我們在jquery中做轉換？ – Sowmya 2013-05-06 11:31:39

您可以採取CSS動畫看看。

來源

2013-05-06 10:12:18 user2349561

你可以發表評論，因爲它不是一個真正的答案。 – feeela 2013-05-06 10:14:20

@feeela讓他輕鬆！他還沒有選擇評論！ :) – Razor 2013-05-06 10:15:35

在懸停時滑動輸入並保持幾秒鐘

回答

相關問題