如何在本網站上展開/展開DIV

當用戶點擊菜單項（關於服務，工具等）時，我真的很喜歡DIV從頂部到底部然後從左到右的展開/展開方式。）在這個網站上。似乎它是由一個非常有才華的人開發的。如何在本網站上展開/展開DIV

任何想法如何實現這樣的事情？我期待着通過複雜的CSS動畫來完成這個任務，但是看起來似乎並非如此。

許多感謝

來源

2014-12-02 Greg

您可以查看網站...爲什麼不認爲它有對CSS和HTML和JS？ – Codeman 2014-12-02 20:01:51

它看起來像他們有一個邊界定位的div和只是隨着時間的推移改變寬度/高度。 – rfornal 2014-12-02 20:05:17

在該網站上它與使用jQuery UI實現 - 更具體地說與Fold Effect。

來源

2014-12-02 20:06:58 lmazgon

如果你不想使用jQuery UI，我想你可以通過動畫css來實現...： - ?? 第一個狀態是height: 0;和width :30px; ...然後使用動畫點擊事件，您可以給高度一個值和動畫時間，寬度延遲等於大於高度動畫時間，然後它是值...應該做的訣竅，但它比實際使用更爲生硬UI

來源

2014-12-02 20:46:31 Alin

我認爲只使用jQuery UI來完成這項任務將是一個矯枉過正的問題，實際上你甚至不需要jQuery這裏，但我認爲你想堅持下去，因爲它比較容易既能讀取和寫入代碼：

$("a").click(function() { 
    $("#fold") 
    .animate({ width: "500px" }, 1000) 
    .animate({ height: "500px" }, 1000) 
});

參見：

http://jsfiddle.net/bartkarp/u3qtt6fo/

來源

2014-12-02 21:04:30

感謝這個例子！如果它沒有太多的問題，你可以添加一個或兩個鏈接到你的例子（如，如果它是一個導航菜單），並展開功能，當再次點擊鏈接或另一個鏈接？所以基本上更接近我以網站爲例。然後我會試着瞭解它是如何工作的，非常感謝您的幫助！ – Greg 2014-12-03 07:39:55

@Greg，我已經更新了小提琴:)添加了一些額外的評論，他們應該更容易掌握髮生了什麼。儘管我強烈建議查看jQuery文檔。 – 2014-12-03 22:23:11

非常感謝，非常感謝您的幫助！ – Greg 2014-12-04 07:48:49

如何在本網站上展開/展開DIV

回答

相關問題