-8

我必须在 html 页面中添加介绍动画。所以我需要在加载页面时首先看到的是全屏的 gif（大约需要 2 秒），然后我必须淡出 gif 并淡入 html 页面。你能帮助我吗？我的网页包含在这样的 div 中：

<body>

    <div id="site">

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

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

“站点”中包含的内容必须在 gif 介绍播放并结束后出现 - 淡出。

这是我首先尝试的：

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

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

4

3 回答 3

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

希望我能帮助你

于 2013-09-23T15:39:32.200 回答
0

如果是我，我会将我的 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 需要多长时间……查看预加载等以了解更多信息。这是一个非常粗略的示例，可以帮助您入门。

于 2013-09-23T15:38:55.093 回答
0

这是一个解决方案：

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。不建议使用盗链。

于 2013-10-15T08:58:25.893 回答