how to create a sliding open door effect

Question

i'm looking to create a sliding open door effect with jquery that has the following functionality:

• arrive on the page and the doors are closed
• click a link and the doors slide outwards a fixed amount on the x-axis
• click the same link again and the doors close

i started out with the concept here, which works great:

http://buildinternet.com/2009/07/animate-curtains-opening-with-jquery/

but realised that i wanted the doors to slide across, rather than shrink in size, using the type of functionality seen here:

http://ricostacruz.com/jquery.transit/

so i think what i am looking for is some type of 'animate' functionality:

http://api.jquery.com/animate/

this is the logic of the functionality i am trying to achieve:

static state:
background: an image that is revealed when the doors slide open.
door-left-inner: 122px wide x 244px high, centered and offset left -61px with z-index 3.
door-left-outer: 122px wide x 244px high, centered and offset left -151px with z-index 2.
door-right-inner: 122px wide x 244px high, centered and offset right 61px with z-index 3.
door-right-outer: 122px wide x 244px high, centered and offset right 151px with z-index 2.

onclick (all these functions take place at the same time):
door-left-inner x-position slide on click: -164px on x-axis.
door-left-outer x-position slide on click: -74px on x-axis.
door-right-inner x-position slide on click: 164px on x-axis.
door-right-outer x-position slide on click: 74px on x-axis.

here is a diagram of what i am trying to achieve:

attempted code (not currently working)

$("#open_close_doors").click(function(){ $("#leftdoor_inner").animate({"left": "-=50px"}, "slow");});​

and here is my jsfiddle attempt at getting one of the doors to slide - i figure once i know how to get one of the doors sliding i'll be able to apply the same logic to the others. also i'm a relative newb to jquery.

http://jsfiddle.net/9zsdN/

thank you.

Answer 1

Here's the corrected jsFiddle for the same: http://jsfiddle.net/9zsdN/1/

$("#open_close_doors").click(function(){ $("#leftdoor_inner").animate({"left": "-=50px"}, "slow");});​

It should be:

$(".open_close_doors").click(function(){
  $("#leftdoor_inner").animate({"left": "-=50px"}, "slow");
});​

The difference lies in the way you access an element. As you can see, when you access an element by class, you use " .classsname" instead of "#classname" as you have done.

"#name" is used for accessing elements by their id.