Learn

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.

We can hide elements with jQuery, like this:

$('.my-selector').hide();
  1. We attached the hide function directly to the jQuery selector.
  2. The hide function will add the CSS property display: none to the DOM element from the page, which will hide it.

Instructions

1.

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 skillset.

Inside the main function, delete the $skillset variable and the alert you wrote in the last exercise. Then use jQuery to hide the skillset element. Do this by writing a selector for skillset, then attaching hide() to it with a period.

Then, click ‘Run’.

2.

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.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Already have an account?