.addclass не работает при загрузке страницы

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

Вот HTML

    <header id="head" class="wrap" style="background-color:transparent;">

<div class="123">
    <ul class="abc">

<li><a href="/index.php#home" class="class1">Home</a></li>
<li><a href="index.php#portfolio">Portfolio</a></li>            
       <li id="defg"><a>defg</a></ul></li></ul>
</div>

<div class="class2">


        <div class="title">Title</div>
        <span id="title-seperator">|</span>

</div>

</header>   

<div class="mainpart" id="mainpart"> A bunch of other nested elements with....</div>

Вот мой CSS

    header
    {
        margin:0 auto;
        height:11%;
        background-color:#eee;
        z-index:10;
    }
    header .animateHeader
    {
-webkit-animation: rotateInRight 4s;
-moz-animation: rotateInRight 4s; 
-o-animation: rotateInRight 4s; 
animation: rotateInRight 4s; 
    }

    #mainpart .animateMainpart
    {
-webkit-animation: fadeInRight 4s;
-moz-animation: fadeInRight 4s; 
-o-animation: fadeInRight 4s; 
animation: fadeInRight 4s;
    }
    #mainpart {
height: 80%;
width: 100%;
background-color: #eee;
white-space: nowrap;
z-index: 10;
max-height: 520px;

overflow: hidden;
outline: none;
background-color: transparent;
}

    @-webkit-keyframes fadeInRight {
from {
    opacity: 0;
    -webkit-transform: translateX(300px);
}

to {
    opacity: 1;
    -webkit-transform: translateX(0);
}
    }

    @-moz-keyframes fadeInRight {
0% {
    opacity: 0;
    -moz-transform: translateX(300px);
}

100% {
    opacity: 1;
    -moz-transform: translateX(0);
}
    }

    @-o-keyframes fadeInRight {
0% {
    opacity: 0;
    -o-transform: translateX(300px);
}

100% {
    opacity: 1;
    -o-transform: translateX(0);
}
    }

    @keyframes fadeInRight {
0% {
    opacity: 0;
    transform: translateX(300px);
}

100% {
    opacity: 1;
    transform: translateX(0);
}
    }

  @keyframes rotateInRight {
from {
    transform-origin: 100% 0%;
    transform: rotateY(-200deg);
}
to {
    transform-origin: 100% 0%;
}
}
 @-webkit-keyframes rotateInRight {
from {
    -webkit-transform-origin: 100% 0%;
    -webkit-transform: rotateY(-200deg);
}
to {
    -webkit-transform-origin: 100% 0%;
}
}
  @-moz-keyframes rotateInRight {
from {
    -moz-transform-origin: 100% 0%;
    -moz-transform: rotateY(-200deg);
}
to {
    -moz-transform-origin: 100% 0%;
}
}
  @-o-keyframes rotateInRight {
from {
    -o-transform-origin: 100% 0%;
    -o-transform: rotateY(-200deg);
}
to {
    -o-transform-origin: 100% 0%;
}
}

и, наконец, вот мой JavaScript (с использованием библиотеки JQuery)

   <script>
   $(document).ready(function () {

        $("body").preloader({
            //Preload the contents of the page before they're displayed.
        });

    });
    </script>
    <script>    
$(window).load(function() {
    $("#mainpart").addClass("animateMainpart");​
    $("header").addClass("animateHeader");​
}); 
   </script>

В целях тестирования я поместил поле предупреждения внутри функции загрузки, чтобы увидеть, выполняется ли функция вообще. Окно предупреждения появляется только в том случае, если предупреждение само по себе находится внутри .load, однако, как только я пытаюсь разместить .addclass, ни анимация, ни предупреждение не появляются, поэтому я знаю, что функция .load работает. Это просто вопрос, почему .addclass не работает. Также моя функция .ready с классом preloader работает нормально и не вызывает никаких проблем, поэтому я уверен, что это не вина этого класса.

Спасибо