移動DIV時的形式展開（過渡CSS）

只是寫一些CSS，我有，你點擊搜索圖標，一個很酷的搜索形式，它擴展了使用，「過渡：寬0.5易於進出」，在CSS 。太好了。這工作正常。移動DIV時的形式展開（過渡CSS）

不過，我打算把我的導航欄旁邊的搜索格在它的權利，但當然，當用戶點擊搜索按鈕，它會重疊。我想知道是否有人知道擴大搜索時的方式，導航Div會自動向右移動。我也希望div在表單失去焦點時恢復正常（因爲搜索欄使用「緩入」功能返回）。

我想可能有一些JQuery在那裏，但我真的不知道如何寫它，如果有的話？

2012-04-04 30secondstosam

確實有一個jQuery方法可以幫助你做到這一點。您可以使用jQuery's .animate()來照顧您的轉換。

$('#search').click(function() { 
    $('#navigation').animate({width: '100px'}, 500); 
}

這會在您點擊搜索元素並將動畫轉換超過0.5秒時將導航寬度縮小爲100px。

你可能會需要玩的CSS停止你的頁面破裂的流動，但設置了overflow屬性應該採取的是很容易。

來源

2012-04-04 14:02:04 cchana

這是一個夢幻般的開始！謝謝。唯一的一點是，我希望它將導航切換到另一個地方，而不是縮小它。我也希望它恢復正常時，表單失去了焦點（這是JS的「onblur」不是嗎？）它只是一個應用功能的點擊事件，然後應用一個反向動畫與「onblur 「事件？ – 30secondstosam 2012-04-04 14:49:28

是的，你可以用jQuery的[blur事件]（http://api.jquery.com/blur/）創建一個類似的函數。而不是寬度，改變最合適的屬性，但不知道HTML結構或CSS，我不能真正修改我的答案，以幫助你...說了這麼多，如果導航是浮動的，以便它坐在搜索欄旁邊，動畫搜索欄應該也會移動導航，您可能根本不需要任何JavaScript。 – cchana 2012-04-04 14:55:59

聽起來不錯！是的導航是一個左浮動。＃導航 { \t position：absolute; \t寬度：自動; \t身高：自動; \t float：left; \t margin：5px 0 0 35px; \t padding：5px 0 5px 5px; } – 30secondstosam 2012-04-04 15:33:29

移動DIV時的形式展開（過渡CSS）

回答

相關問題