So I spent about an hour on the front page of Hacker News last night and here’s why: it was a terribly slow night. Laughs all around, but I’m serious. Tangentially related to it being a slow night on HN, I made a super simple little jQuery thing that mimics sliding doors opening up. Being a sci-fi geek, I naturally called it Pod Bay Doors. I guess a few people enjoyed it and it got enough votes quickly enough to push it up to #22.
Behind the scenes there is not too much going on there. The main components are three
div elements, two of which are nested inside the third. The container
div has a relative position, while the two nested components are absolutely positioned. Just some widths, floating, and
overflow:hidden is all that’s really needed to handle the appearance of everything.
.animate() to move them around. The button is set up to toggle, so I didn’t have to worry about handling the binding and unbinding of click events. Simple and effective. I was unhappy with jQuery’s sole ease type, “swing”, so I included the always excellent jQuery Easing plugin to provide for more easing options.
Eventually, I may make it a proper jQuery plugin, but would prefer to get more comfortable with programming and jQuery before doing that. I would love to allow for passing of options like speed and easing, but right now I am just happy to have a fun, working prototype of the effect. Check it out on Github and and view the demo here. Enjoy!