jQuery bounce effect

Hi I'm looking to make a modal div appear on a page using a bounce effect like seen on the iPhone for its pop-up messages.

By bounce I mean like scale bigger than normal and then become the actual size in an elasticated way whilst fading into view.

Any ideas on whe开发者_JS百科re to start with this?

I'd start with the easing plugin. The demo on the home page there seems pretty close to what you're after.

I start by playing with the different effects in the easing plugin: http://gsgd.co.uk/sandbox/jquery/easing/

Since you cannot scale HTML elements properly by a factor (this looks weird), i recommend a simpler approach. Simply set overflow: hidden and animate the size of the element accordingly. This is not going to look as nice as the native dialogs, but it comes close. You can use the jQuery easing plugin for the bounce animation.

The solution was to use CSS3 animation techniques such as scale3d and mix it with opacity.