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函数与preloader类工作正常，并没有造成任何问题，所以我确定这不是那个类的错误。

由于

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>

加载页面时.addclass不起作用

1 个答案: