jquery - 加载页面时 .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 不工作的原因。此外，我的 .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>