0

Basically I've been asked to make a website with a logo image fading in before displaying the page ( say 4 seconds display).

From what I can see the best way to do this will be using jQuery. I've seen othe examples where a page fades in after all images are loaded, but how can i do this by specifying an amount of time.

To Sum up:

Want to load image in full screen with loading page slightly visible behind (lightbox efect), then fade into fully loaded site content after 4 seconds, regardless of whether the page is loaded or not.

How can I do this?

4

2 回答 2

0

用于setTimeout延迟和呼叫fadeIn和fadeOut

尝试这个

$(window).load(function(){
   $('#imageID').fadeIn('slow',function(){
         setTimeout(function(){
            $(this).fadeOut('slow') // $('#imageID')".fadeOut('slow',
         },4000);
   })
});

你可以使用模态来显示像灯箱效果的标志......并打开和关闭liekwise......

模态链接..

带有 true 的简单模态
jquery 对话框

于 2013-03-28T11:47:57.370 回答
0

您可以使用绝对定位在页面上的 div 标签开始页面，宽度和高度为 100%，然后使用 jquery 来“动画化”这个 div 的不透明度，直到到达几乎看不到它的位置，然后隐藏分区。

<html>
  ..... header content where javascript and what not goes
  <body>
    <div id='introdiv' style="position:absolute;z-index:9999;width:100%;height:100%;">
      .... image goes here
    </div>
    .... other page content goes here.

使用 jQuery Animate，你只需 $("#introdiv").animate({......

您必须找到一种方法来确保 div 标签在所有其他请求中都保持隐藏状态，否则您的图像每次都会显示。

如果要在页面加载之前显示图像，请将动画放在 jQuery 的 document.ready 函数中。

于 2013-03-28T11:50:04.803 回答