Jquery动画问题

Question

我遇到了最棘手的问题。 我有一个jQuery函数，可以动画调查的结果栏。

function displayResults()  { 
    $(".q_answers1 div").each(function(){
        var percentage = $(this).next().text();
        $(this).css({width: "0%"}).animate({
            width: percentage}, 'slow');
    });
}

正如您所看到的，它是一个简单的动画，可以延长几个div。它工作正常，直到我将其嵌入我的主页。问题似乎是有太多的其他内容打破了流畅动画的美感。我一直在想我在实现JavaScript，CSS等方面感到茫然，但经过几次测试和逆向工程后，我发现了更多的内容（图片，文字，视频），我已经在页面上，更好的是质量的动画是。我只能猜到原因是什么......我真的很喜欢我的动画:)！感谢帮助！

This demo显示了它应该是什么样子。当页面上的内容较少时，我会按照这样的方式工作。质量差，我的意思是不是流畅的酒吧。最糟糕的情况是，条形图在瞬间出现在它们的最终宽度中。在Mozilla和Chrome和IE7上测试它 - 没有区别。

---

编辑：似乎没有实际的例子，你的双手被束缚，所以这里有一些工作要做。只需找到红色边框，选择一个答案并单击按钮。如果您想知道，该语言是保加利亚语。

1. 理想的行为here
2. 我可以忍受here
3. 开始看起来很奇怪here
4. 我没有得到here

如果它们对你来说看起来都一样，那么我的计算机应该受到责备，我不必再担心这个特殊的问题了，这已经花了很多功夫。如果可能，请使用Mozilla。

---

编辑2：我发现这个SO answer回答了我关于animate()函数及其工作方式的一些问题，但问题仍然没有解决，至少对我而言计算机。

Answer 1

我们在这里谈论了多少内容？ 如果页面足够大，则浏览器引擎可能根本没有足够的能力来足够快地重新呈现内容以提供平滑的显示。

Answer 2

jQuery执行动画的方式是定期更新内联CSS属性。如果您正在更改样式的元素浮动或与页面上的其他元素进行其他复杂的交互，则动画将不会平滑。

简而言之，在页面上放少量内容。您也可以尝试某种iFrame解决方案或切换到使用闪存来显示结果。

不幸的是，这只是系统的一个限制。