How to slide a div from the top right corner with jquery?

Question

I have some hidden divs and when a button is clicked I want to show a div.

I've seen slideDown but that's not exactly what I want. I want that the hidden div grows from nothing to it's original size and doing this from the top right corner of the (hidden) div.

Answer 1

$("#box").show('size', { origin: ["top", "right"] }, 2000);

Use .toggle() with the same parameters instead if you want to be able to hide it with the same event.

First parameter is the effect we're using, size. Second parameter is an object of options specific to this effect, of which we only use origin to specify where it should resize from. Third parameter is the duration in milliseconds, which you can change at your leisure.

Live example: http://jsbin.com/uwonun/1