使用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>块直接放在header元素下面以最小化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>