Start off by setting your #header
to display: none
, i.e.
#header{display:none;}
then start the animation with
$(document).ready(function () {
$("#header").fadeIn(3000);
});
See jsFiddle.
문제
I have the following HTML:
<div id="header">
<div id="logo_title">
<p> What's Playing? </p>
</div>
</div>
I want to make this fade in slowly when a user first visits the website. I'm using the following javascript:
$(window).load(function () {
$("#header").fadeIn(10000);
});
Here's the 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;
}
It doesn't seem to be working though. Any idea on what I'm doing wrong? I'm new at this!
Thanks!
해결책 2
Start off by setting your #header
to display: none
, i.e.
#header{display:none;}
then start the animation with
$(document).ready(function () {
$("#header").fadeIn(3000);
});
See jsFiddle.
다른 팁
All jQuery animations that change an element’s display
to or from none
don’t take effect if the element is already in that state. You’ll need to hide it first.
$("#header").hide().fadeIn(10000);
Use $(document).ready
, not $(window).load
. In fact, you may want to eschew the variety of events in favour of putting the <script>
block directly beneath the header element to minimize FOUC. Of course, that’s not necessary when you can…
Accomplish this with CSS. (You might need to duplicate each of these with a -webkit-
prefix, too.)
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
#header {
animation: fade-in 10s linear;
}
That seems like a bit of an annoying animation. Are you sure it’s necessary?
This is just a guess, but you could maybe use more descriptive HTML:
<header id="header">
<h1 id="title">What’s Playing?</h1>
</header>