Question

So I have an interesting problem. I currently have a grid of four block elements, and I would like to enable some behavior to cause the div to grow when clicked on. The catch is, I am trying to animate it to the top level of the page, aka, I don’t want it to dislocate the position of the other divs on the page.

It’s difficult to explain, but I want it to kind of be like a modal window with the open animation originating from the element’s location. Like a popup when it’s clicked. Right now I am trying to do this in the click function:

$( "#cell" ).animate({
          height:600, width:600, position:'fixed'
        }, 1000, "linear", function(){ alert("all done"); });

This animates it bigger, but I was hoping to make it like an overlay. Has anyone seen anything like this, or a plugin that accomplishes this before?

Answer 1

Clone the element, absolutely position it over the original and animate the copy.

Press “Add to cart” and see this in action:

http://toys.scholarschoice.ca/products/Active-Play-536/12-Years-Old-Up-563/RipStik-Caster-Board-Silver-p46490/pstart1/