smoother jquery transitions

Question

Please see: http://jasondaydesign.com/masonry_demo/ and click on the movemaine.com image

I would like my transitions with the show & hide, plus the masonry rearrange to be smoother overall. I've played with the speeds and i'm not getting the results I want.

Additionally, I would like a pointer cursor with the show hide, but I can't seem to get that to work. Thoughts?

and thanks!

Answer 1

Have you checked out any of jQuery's easing Plugins?

Edit: regarding CSS/changing the cursor. Adding the following rule should do the trick:

.expandable {
  cursor: pointer;
}

Answer 2

I love the concept, but I'm afraid you're just bumping into the limitations of what the browser can handle. About the only thing you can do is make sure that everything that moves is position: absolute so the browser doesn't have to reflow anything during an animation.

Maybe try moving them one at a time, or one column at a time, but very quickly. It would be a slightly different effect, but it would cut down on the number of concurrent animations. Or you could slide the first two columns down to accommodate the larger image.

Regarding the cursor, you can probably do that with CSS like {cursor:hand;}. Google "css cursor types" and you'll see what the options are.