We can use J query to fade elements in a note using the fading and fade out methods.
Here we have an example of the fade in method when we click the button a series of div elements gradually
fade in we'll do that once more.
You can see that each box fades in at a different time interval as well.
Let's examine the code behind this HMO page to see how it works.
First in our body tags.
We have we've created for divs each div has an I.D. Div 1 d2 3 and 4 each div also has a class attached
to it.
The class name is box
if we refer to our style sheet in the head.
Take we can see that the box class has the following attributes a width of one hundred and sixty pixels
height of one hundred sixty pixels display none.
This means that none of these divs will be visible when the page initially loads background color red
as we saw in the demonstration.
Each div was red it had a red background color.
Now if we go up to our script let's examine exactly what's happening to create this effect.
Here we specify when the button is clicked each div should feed in one at a time.
Remember that each div feeds in a different time intervals the time interval is specified here.
It's the red number the first div has a default time interval in the next set of divs we have specified
the the the time interval so Div 2 is one thousand three is three thousand and four is five thousand.
That translates into one second three seconds in five seconds
and this is the reason that each box fades in one after the other.
Let's take a look at it again in our web browser
so there it is.
Each one feeding in one at a time.
Give to it one thousand three thousand and five thousand
now say we wanted the elements to fade out the fade out method works the same way.
We simply need to change the fade in event to fade out.
So let's go ahead and do that will change fading fade out
on each event
and since we're fading out in the opposite direction we also need to invert the time intervals.
Next we need to remove the display none property because we want all the divs to be visible on page
load.
Once you've done that Save the file and we can refresh our web browser.
So now we can see that all the divs are visible on page load and if we could defeat effect button it
fate each day fades out in the opposite direction just as we intended.