Sliding door effect - TutsValley.com - DEMO

Hover over the images to see the effect.


Slide Right

Effect from the tutorial

Slide Left

This effect is made by changing the inside of the animate function in JQuery.

animate({ left : '-'+distance }

Just making it into negative number, everything else is same as the normal effect.

Slide Down

This is effect is made slightly different then in the tutorial.

var distance = $(this).outerHeight();
and
animate({ top : distance }

As you can see, the distance variable is now the height of the div instead of it's width.

Slide Up

This is effect is made slightly different then in the tutorial.

var distance = $(this).outerHeight();
and
animate({ top : '-' + distance }

Same as sliding down effect, but we are making it into a negative number.