JQuery UI Flipping Text like in gumroad.com

css, html, javascript, jquery, jquery-ui

Solution

Figured out how to duplicate the effect. Here you go: http://jsfiddle.net/vyder/gmDRM/

Essentially, the trick is to make the wrapper have a `position:relative` and the two `#content-type` spans have `position:absolute`, so they appear one on top of the other when they drop up and down.

(There is still a bug in the way the array is being handled, shouldn't be too hard to fix that, I think I have some odd logic going on with deleting and adding elements)

OCD refactored the code to make it more readable and got the iteration through the array to work as well.

Problem

I am trying to include a series of text phrases at my home page just like that in this website's homepage www.gumroad.com. From that site I could get a function which uses hide and drop and is switching between texts but the problem is: JQuery UI makes an intermediary div in this of class "ui-effects-wrapper" which has a smaller width due to which first the text appears in two lines then it shrinks to one. Does any one know of any way to achieve the same effect as it is on the site mentioned above?

Original source