i'm looking to create a sliding open door effect with jquery that has the following functionality:
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.
thank you.
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 "" as you have done.#classname
"#name
" is used for accessing elements by their id.