圣诞节来临日历

Question

我有一个降临节日历的愿景，其中有真实窗户的图片与颤抖，当用户点击图片时，颤抖打开以揭示它们背后的东西。

我该怎么做？我想我可以在 jQuery 中使用原始的 slideDown 方法。但是有slideLeft 和slideRight 吗？还是一个敞开的门，每个颤抖都绕着一个轴旋转？

这将是一个同时向左和向右打开过渡的 div。

Answer 1

我很想看到其他解决方案，我发现了这个……我想没有很多可行的例子，所以我会分享。

我今天写了这个：http://www.ucc.org/advent/calendar/

修改自：http://web.enavu.com/demos/curtain/

Answer 2

核心 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 轴的旋转投影到二维平面？如果你从数学上算出来，可能有一种方法可以使用核心 .animate() 函数来实现，它会为一组自定义 CSS 属性设置动画。但是，这可能仅限于导致矩形而不是您可能想要的菱形的操作。