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.

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.

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.