1

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:

enter image description here

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.

Community
  • 1
  • 1
user1063287
  • 10,265
  • 25
  • 122
  • 218

1 Answers1

2

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.

Viral Jain
  • 1,004
  • 1
  • 14
  • 30
  • ah! thank you, fantastic! ah, i can't believe i didn't see that, perfect, thank you! – user1063287 Oct 25 '12 at 06:07
  • for those interested, there is a revamped jsfiddle here with working open close functionality. http://jsfiddle.net/9zsdN/3/. contributed by user here http://stackoverflow.com/a/13064976/1063287 – user1063287 Oct 25 '12 at 09:34