Now that we can select an element with jQuery, we can use built-in jQuery functions to modify it. From here on, we will start building features into our skills website.
First off, it would be nice to make the page fade in when loaded.
To make a page fade in, it must first be hidden. We can hide elements with jQuery with a function named
hide elements with jQuery, like this:
- We attached the
hidefunction directly to the jQuery selector.
hidefunction will add the CSS property
display: noneto the DOM element from the page, which will hide it.
We want all of our skills to fade in, so we need to hide the skills first. In index.html, the element around all of our skills has the class
main function, delete the
$skillset variable and the
alert you wrote in the last exercise. Then use jQuery to
skillset element. Do this by writing a selector for
skillset, then attaching
hide() to it with a period.
Then, click ‘Run’.
Notice that the skills have been hidden.
hide added a CSS property of
display: none to
.skillset element, which hid the elements.
Now, let’s learn how to fade in the
skillset when the page loads. Click ‘Next’ to continue.