不确定如何将元素设为透明

Question

So I am trying to make an unordered list fade in upon the click of the main header, but I am not sure as to how to have the unordered list begin as transparent. I don't want to fade it out as that involves an animation. I just want it to be invisible when the page is loaded.

EX:

HTML

<h1 id="event">Click Me To Show List</h1>
<ul id="list">
    <li>Example 1</li>
    <li>Example 2</li>
</ul>

JQuery

$(document).ready(function(){

    // How would I make the <ul> start as transparent ???

    $('#event').click(function(){
        $('#list').fadeIn(3000);
    });

});

Answer 1

Just add

#list {
  display: none;
}

to your css.

Demo

If you want it to do with jQuery, you can add the follwing inside the .ready -handler:

$('#list').hide();

Answer 2

First of all, you have an error in your statement. It is:

$('#list').fadeIn(3000);
// -------^ You forgot the .

Use opacity: 0; to make it transparent in CSS. Or if you wanna use jQuery, use $.fadeTo() this way:

$(elem).fadeTo(0, 0);

Snippet

 $(function () { $("div").fadeTo(0, 0).removeClass("hidden"); });

 .hidden {opacity: 0; visibility: hidden;}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus error reiciendis, numquam id, praesentium illum. Enim molestias modi facilis pariatur eligendi doloribus qui assumenda voluptates, ut, nobis vel consequatur dolorem.</div>

And if you wanna fadeIn() the element, you can start with .hide() and then fadeIn() , by using a .hidden class like this. You won't see the flash of the content, whatsoever!

Snippet

 $(function () { $("div").hide().removeClass("hidden").fadeIn(3000); });

 .hidden {display: none;}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus error reiciendis, numquam id, praesentium illum. Enim molestias modi facilis pariatur eligendi doloribus qui assumenda voluptates, ut, nobis vel consequatur dolorem.</div>

Answer 3

HTML

<h1 id="event">Click Me To Show List</h1>
<ul id="list" style="display:none;">
    <li>Example 1</li>
    <li>Example 2</li>
</ul>

JQuery

$(document).ready(function(){

    // How would I make the <ul> start as transparent ???

    $('#event').click(function(){
        $('#list').show();
    });

});