JQuery UI翻转文本就像在gumroad.com [英] JQuery UI Flipping Text like in gumroad.com

问题描述

我试图在我的主页上添加一系列文本短语，就像本网站的主页中所示：
www .gumroad.com 。

从该网站我可以得到一个使用隐藏和放置功能，并在文本之间切换，但问题是：JQuery UI使一个中间div在这个类ui-effects-wrapper中，宽度较小，因此首先文本出现在两行中，然后缩小到一。

是否有人知道有什么方法可以达到与上述网站相同的效果？

解决方案

找出如何复制效果。这里你去： http://jsfiddle.net/vyder/gmDRM/

实质上，诀窍是使包装具有位置：relative ，并且两个＃content-type spans有 position：absolute ，所以当它们上下移动时，它们会出现在另一个之上。

（数组的处理方式仍然存在一个错误，应该不难解决这个问题，我想我有一些奇怪的逻辑正在删除和添加元素）

OCD重构了代码以使其更具可读性，并且通过数组迭代也可以工作。

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?

解决方案

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.

这篇关于JQuery UI翻转文本就像在gumroad.com的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！