CODEWITHSUNDEEP
javascriptjqueryhtmlcss
James Snowy
James Snowy

Reputation: 415

How to fade in all elements in a header?

How can I fade in all the elements of my header when the window has fully loaded using the fadeIn tag jQuery provides?

Relevant code:

HTML

<div class="banner">
 <header class="header">
  <ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Team</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
    <i class="fa fa-bars"></i>
</header>

Upvotes: 0

Views: 1299

Answers (3)

L777
L777

Reputation: 8457

You can use CSS transition on "opacity" property. The advantage is that you can set a lenght (in seconds), a style (ease, ease-in, ease-out, linear, cubic-bezier(n,n,n,n)) and a delay (in seconds) for the effect. Example: transition: opacity 2s linear 1s;

function show(){
document.getElementById("header").style.opacity = "1"; 
}
#header {
opacity: 0;
background: gold;
-webkit-transition: opacity 3s; /* Safari */
transition: opacity 3s;
}
<body onload="show()">
 <header id=header>
  <ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Team</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
    <i class="fa fa-bars"></i>
</header>
</body>

Upvotes: 0

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

Try to invoke .fadeIn() over the element which is having a class header(no need to grab all the elements inside of it) inside widow's load event,

$(window).load(function(){
 $(".header").hide().fadeIn("slow");
});

Suppose if you want to fadeIn the internal elements for sure then you have to write it like,

$(window).load(function(){
 $(".header > *").hide().fadeIn("slow");
});

Upvotes: 1

Dustin Poissant
Dustin Poissant

Reputation: 3418

The following is how you run a function after the DOM has completely loaded:

$(function(){
  // Code here  
});

And you can fade in elements using .fadeIn, and you can select all items within the header using $("header").children().

So your complete code looks like:

$(function(){
  $("header").children().fadeIn();  
});

If you would like the elements to start "hidden" and then fade in use:

$("header").children().hide();
$(function(){
  $("header").children().fadeIn();
});

Upvotes: 1

Related Questions