聖誕降臨日曆

Question

我有一個出現日曆的願景，那裏有帶有顫抖的真實窗戶的圖片，當用戶點擊一張圖片時，顫動打開以揭示它們背後的內容。

我該怎麼做？我想我可以在jQuery中使用基本的slideDown方法。但有沒有slideLeft和slideRight？還是一個openDoor，每個顫動都在一個軸上旋轉？

這將是一個div，同時向左和向右打開過渡。

Answer 1

核心jQuery只有一個slideDown和slideUp（jQuery的許多不幸的特質之一）。但有jQuery UI（用戶界面），這是jQuery框架的擴展，您可以通過它進行實現。它具有可接受方向和速度參數的滑動效果（請參閱有關http://docs.jquery.com/UI/Effects/Slide的文檔）。

一個例子是

$("leftshutter").hide("slide", { direction: "left" }, 1000); 
$("rightshutter").hide("slide", { direction: "right" }, 1000); 

雖然這可能做的正好相反。

我不確定openDoor需要什麼樣的動作。你如何將Z軸繞Z軸旋轉到二維平面？如果數學計算出來，可能會有一種方法可以使用核心.animate()函數來執行此操作，該函數動畫了一組自定義的CSS屬性。但是，這可能僅限於導致矩形的操作，而不是您可能需要的菱形。

Answer 2

我很好奇看到其他解決方案，我發現這...我想沒有很多工作示例，所以儘管我會分享。 http://web.enavu.com/demos/curtain/