Hi there,
I'm using jquery and I'm trying to display part of an image, say a square in the middle of it, then using animate, roll out the rest of it.
I'm thinking something involving divs, with overflow: hidden, but I can't figure it out.
Many thanks.
To display the square initially, you would use a technique called image spriting and there are many ways to actually accomplish it with CSS. Here's one by alistapart. After that, you could use animate to alter the css manually.
However, I bet there's a jquery plugin that does something like this automgaically...
you have to work with css: position to put a div over another div css position
You could setup something similar to a css sprite map where you use css to display a specific part of the image. Then use jquery to change the css class to something that displays the whole image.
Here's a link about css sprite maps. http://css-tricks.com/css-sprites/