Jquery animate problem..

Question

Hey guys, I have the weirdest of problems. I have a jQuery function that animates the result bars of a poll.

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

As you can see it is a simple animation that elongates a couple of divs. It works OK until I embed it on my main page. The problem seems to be that there is too much OTHER content that breaks the beauty of the smooth animation. I was thinking of me being lame in implementing the JavaScript, CSS etc. but after a couple of tests and reverse engineering I found out that THE MORE CONTENT (images, text, video) I HAVE ON THE PAGE, THE WORSE THE QUALITY OF THE ANIMATION IS. I can only guess what the reason is... I really like my animation :)! Appreciate the help!

This demo shows how it should look like. I get it to work like this when the page has less content on it. By bad quality I mean not smooth flow of the bars. The worst case is when the bars appear in their final width in an instant.Tested it on Mozilla and Chrome and IE7 - no difference.

---

Edit: It seems that without the actual examples your hands are tied so here is something to work on. Just look for the red border, pick one answer and click the button. The language is Bulgarian if you are wondering.

1. A desirable behavior here
2. I can live with that here
3. Starting to look weird here
4. I don't get this here

If all of them look the same to you then my computer is to blame and I don't have to worry about this particular problem anymore, which already took 2 much effort. Use Mozilla if possible.

---

Edit 2: I found this SO answer that answers some of my questions about the animate() function and how it works, but the problem remains unsolved, at least for my computer.

Answer 1

The way jQuery does it's animation is that it periodically updates inline CSS attributes. If the elements you're changing style's of are floated or have other complex interactions with the other elements on the page then the animation wont be smooth.

In short, put less stuff on your page. You might also attempt some sort of iFrame solution or switch to using flash to display the results.

This is just a limitation of the system, unfortunately.

Answer 2

How much content are we talking here? If the page is large enough, the browser engine may simply not have enough power to re-render the contents quickly enough to provide a smooth display.