Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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?

share|improve this question

2 Answers 2

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.

share|improve this answer

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/

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.