javascript - 使用 JQuery 淡入标题

Question

我有以下 HTML:

      <div id="header">
         <div id="logo_title">
            <p> What's Playing? </p>
         </div>
    </div>

我想让它在用户第一次访问网站时慢慢淡出。我正在使用以下 JavaScript:

  $(window).load(function () {
     $("#header").fadeIn(10000); 
   });

CSS 如下:

      #logo_title, #logo_subtitle{
         height: 45px;
         font-family: 'Open Sans', sans-serif;
         font-weight: 300;
         font-size: 80px; 
         z-index: 4;
         text-align: center;
         margin: 100px 0px 0 0;
     line-height: 75px;
    }

但它似乎不起作用。知道我做错了什么吗？我是新来的!

谢谢!

Answer 1

1. 所有改变元素的 display 的 jQuery 动画往返 none如果元素已经处于该状态，则不会生效。您需要先隐藏它。

   $("#header").hide().fadeIn(10000);
   

2. 使用$(document).ready ，不是$(window).load 。事实上，您可能想避开各种事件，转而使用 <script> block 直接位于标题元素下方以最小化 FOUC。当然，如果你可以的话，那就没有必要了……

3. 使用 CSS 来完成此任务。 (您可能还需要使用 -webkit- 前缀来复制每一个。)

   @keyframes fade-in {
       from { opacity: 0; }
       to { opacity: 1; }
   }
   
   #header {
       animation: fade-in 10s linear;
   }
   

4. 这似乎是一个有点烦人的动画。您确定有必要吗？

5. 这只是一个猜测，但您也许可以使用更具描述性的 HTML:

   <header id="header">
       <h1 id="title">What’s Playing?</h1>
   </header>