.addclass在頁面加載時不起作用

Question

我試圖在我的主頁面加載後運行動畫，但我有一個預加載系統，加載並加載動畫並隱藏主頁面的內容。這會加載所有網站內容（圖像等），並且一旦完成，主頁面便可見。一旦主頁面可見，我想通過使用.addclass加載一些動畫。

下面是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不起作用的問題。另外我的.preloader類的.ready函數工作得很好，不會造成任何問題，所以我確信它不是那個類的錯。

感謝

Answer 1

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

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

    }); 

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