Christmas advent calendar

Question

I have a vision of an advent calendar, where there are pictures of real windows with shudders, and when the user clicks on a picture, the shudders open to reveal what's behind them.

How can I do this? I suppose I could use the primitive slideDown method in jQuery. But is there a slideLeft and slideRight? Or an openDoor, where each shudder rotates on an axis?

This would be one div that has a transition of opening to both the left and right at the same time.

Answer 1

Core jQuery only has a slideDown and slideUp (one of jQuery's many unfortunate idiosyncrasies). But there's jQuery UI (User Interface), an extension to the jQuery framework, with which you can achieve this. It has a slide effect that accepts parameters for direction and speed (see documentation on http://docs.jquery.com/UI/Effects/Slide).

An example would be

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

although that might do the exact opposite.

I'm not sure what kind of motion openDoor would need. How would you project rotation around the Z axis to the two-dimensional plane? If you figure it out mathematically, there might be a way to do it using the core .animate() function, which animates a custom set of CSS attributes. That is, however, probably limited to manipulations that result in rectangles and not the rhombuses you might want.