Более плавная анимация JQuery

У меня была еще одна ветка по этому поводу, но она не была решена, вероятно, потому что я не очень ясно дал свой вопрос.

Просто хочу попробовать еще раз в надежде, что я приблизлюсь к решению этой проблемы:

Мне недавно было поручено создать одностраничный веб-сайт, который имитирует базовую Flash-анимацию, то есть скольжение и исчезновение элементов.

Когда я получил интерактивный макет, я столкнулся с большой проблемой - прерывистой анимацией. Проблема присутствовала на Mac с экранами выше 18 дюймов независимо от браузеров и Mac ниже 18 дюймов, характерных только для FF версии 3 и ниже. На ПК анимация почти безупречна.

Вот мои коды jquery, и затронутые элементы помечены идентификаторами # md1, # ​​md2 и # 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);
});

Я прибегал к различным методам оптимизации, которые включают кеширование изображений, представленных в затронутых блоках div на странице индекса, и перенаправление пользователя на реальную страницу позже, а также постановку анимации в очередь, но ничего не сработало.

Это действительно довольно неприятно, потому что Кажется, я исчерпал все доступные методы, о которых знаю, и просто не могу заставить их работать на Mac.

Мне кажется, что я компилирую слишком много анимаций в готовом документе, и это вызывает медлительность - может ли кто-нибудь подтвердить, является ли это основной причиной и есть ли другой способ решить эту проблему?

Большое спасибо за вашу помощь, ребята. Я очень признателен =)