用jquery动画圈出文本

Question

我尝试过使用Jquery动画的圆圈文本。我的工作小提琴是：

http://jsfiddle.net/60rz99zu/5/

$(function () {
$('.main-content').circleType({radius: 1000});

    var $els = $('div[id^=quote]'),
        i = 0,
        len = $els.length;
        $els.slice(1).hide();
        setInterval(function () {
            $els.eq(i).fadeOut(function () {
            i = (i + 1) % len
            $els.eq(i).fadeIn();
        })
    }, 2000)
})

第一篇文章运作良好。请参阅我的第二和第三个文字。圆圈效果混乱。我花了更多时间来修复。我不能。我怎么能实现这个？

Answer 1

问题是因为这些元素是隐藏的，圆形插件无法正确找到它的尺寸。

因此，一个解决方案是在初始化库后隐藏它们

<div id="quote1" class="text-center main-content">First Text here</div>
<div id="quote2" class="text-center main-content">Second Text here</div>
<div id="quote3" class="text-center main-content">Third text here</div>

演示：Fiddle

Answer 2

删除第二个和第三个文本上的style="display:none"。你不需要它，因为javascript也隐藏了元素。