html - Smoother Jquery Animation

Question

Had another thread regarding this but it wasn't resolved probably because I wasn't very clear in my question.

Just wanna try again in hope that I close in on resolving this:

I was recently tasked to create a single page website that emulates basic Flash animations i.e. sliding in and fading in and out of elements.

When I got an interactive mock up, I ran into a big problem - choppy animations. The problem was present in Macs with screens above 18" regardless of browsers and Macs below 18" specific only to FF version 3 and below. On PCs, the animation is almost close to flawless.

Here are my jquery codes and the affected elements are tagged with the ids #md1, #md2 and #md3:

$(document).ready(function () {
    $('#md1').animate({ top: "-60px" }, 500);
    $('#md2').animate({ top: "60px" }, 800);
    $('#md3').animate({ left: "60px" }, 1000);
    $('.home').fadeTo(3000, 0.8);
    $('#bg-img-4').fadeTo(1200, 1);
    $('#menu').fadeTo(4000, 1);
    $('#copyright').fadeTo(4000, 1);
});

I've resorted to various optimization methods which include caching the images present in the affected divs on an index page and redirecting the user to the actual page later and queuing the animation but nothing worked.

It's really quite frustrating cos I seem to have exhausted all the available methods I know of and I just can't seem to get it working well on Macs.

I have a gut feel that I'm compiling too many animations on document ready and that's causing the sluggishness - can anyone confirm if that is the main reason and if there is any other way I can tackle this problem?

Thank you so much for your help guys. Appreciate it very much =)

Answer 1

The best way is to use CSS transitions/animations for that. If some browser does not support them then such a browser is not good on animations of any kind.

Transitions and animations in CSS are better optimizeable by native code so in theory may exhibit significantly smoother (higher FPS) behavior.

As of your jquery animations above:

1. Try to reduce number of fadeTo's on complex elements.
2. Try to simplify styling - reduce number of use cases of opacity or rgba() with transparency.

And in general: the fewer DOM elements you have, the better.