iPhone-like jQuery Text Flipper?

Question

I'm looking for a jQuery-based, cross-browser (with support down to IE7), text "flipper" with behavior similar to that on the iPhone. I think it's an iOS 5 feature - if a text message or other notification comes in while I'm doing something else on the phone, a small horizontal region at the top (full width and maybe 15-20 pixels high) shows up with some text. After a few seconds, the rectangular region and text "flip" and fade away.

I'd like to do something similar on a web page. But in addition to the flip/fade effect, I need the text string to change to the next one is a list. I might have 10 or 20 strings all together - I'd like each one to show up for a few seconds, flip/fade to the next one, then start the entire list again after reaching the end.

Anyone know of a jQuery plugin that does this?

Answer 1

The nearest I can think of is the Flip! plugin, using the top or bottom options.

Just note that the effect is more like flipping a plane in 3D space. The iOS notifications you're describing visually behave a bit more like there's a "physical" block of the interface being rotated. Not sure I've seen anyone implement it that way yet, especially not with retaining the part being rotated out, if that'd even be possible.

[EDIT]
The "turnDown" effect option of the jQuery Cycle plugin is more like the iOS notification animation. That plugin is intended for use in situations where you're flipping between multiple objects rather than showing a single notification(you didn't really say what you were doing), but the code is well-documented and you can probably pick out the animation effect's routine without too much work for one-off reuse.

Answer 2

Try jQuery Mobile. It's not really a plugin. But it has multiple effects for mobile browsers and it works on modern browser.

http://jquerymobile.com/