Question

我必须在html页面添加一个介绍动画。所以我需要在加载页面时可见的第一件事是全屏gif（大约需要2秒），然后我必须淡出gif并淡化html页面。你能帮助我吗？我的网页包含在这样的div中：

<body>

    <div id="site">

        <div id="menu">
        ...
        </div>

        <div id="content">
        ...
        </div>
    </div>
</body>

gif intro播放完毕后，“site”中包含的内容必须出现 - 渐弱 -

这是我先试过的：

<script>
$(window).ready(function() {
$('#intro').css('visibility','visible').hide().delay(3000).fadeIn(300);
$('#site').css('visibility','visible');
});
</script>

但我认为这不是正确的方法。

Answer 1

最好的方法是使用css动画。它没有jquery，直接在gif上工作（不需要div） gif必须有：

@keyframes customanim
{

0%   {values;}
100%   {values;}

}

@-webkit-keyframes customanim /* Safari and Chrome */
{

0%   {css-values;}
100%   {more-values;}

}

.animationclass {


position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;

animation: customanim 3s;

-webkit-animation: customanim 5s;

-webkit-animation-fill-mode: forwards;

}

请确保使用“-webkit-animation-fill-mode：forwards”，以便gif在动画后保持隐藏，否则gif将返回其原始状态。

再次播放动画只需在js：

中执行此行

document.getElementById('objecttobeanimated').className ='animationclass';

链接到W3C：

http://www.w3schools.com/css3/css3_animations.asp

希望我能帮助你

Answer 2

如果是我的话，我会把我的GIF放在DIV上并且在网站外面使用id。然后使用类似这样的jQuery： -

var timer = 0; //setting this up as global

$(document).ready( function () {

        $("#site").hide(); // you could have the site as display:none in css instead of this line.
        timer = setInterval( showSite , 2000 ) // here's your 2 seconds delay

});

function showSite() {
      clearInterval(timer);
      $("#myGIFdiv").fadeOut();
      $("#site").fadeIn();
}

我建议延迟更长时间，因为你不知道你的gif需要多长时间才能加载...查看预加载等以了解更多信息。这是一个非常粗略的例子，可以帮助您入门。

Answer 3

这是一个解决方案：

JS：

$(window).load(function(){
    $("#preloader-anim").fadeOut(500);$("#preloader").delay(500).fadeOut(500);
});

CSS：

.preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #fff; z-index: 99999999; }
.preloader-anim { position: absolute; top: 50%; left: 50%; margin-top: -16px; margin-left: -16px; }

HTML：

<div id="preloader" class="preloader"><div id="preloader-anim" class="preloader-anim"><img src="http://www.iec.ch/img/loading_sliders_2.gif" /></div></div>

工作原理：

显示div id =“preloader”，直到页面完全加载。然后，连续淡出loader.gif，div id =“preloader”。

注意：为了便于说明，我使用了我发现的第一个加载gif。不建议使用热链接。

javascript显示介绍动画，然后网站

3 个答案: