Take a look at something else that's really cool called fading where I can actually make text or an
object fade as a mouse over it and then back.
And as a mouse away or whatever I want to do something like that it is kind of like a filter almost
like a video filter kind of thing that's built into a group that we can target certain items with.
I want to go and take a look at that now.
So I created a new document and just called it called it fading up here using the same intro that I
always use with my query code a document ready so whenever the document is ready we can apply the function
and the code that we are going to apply here.
So you've got a bunch of room here and nothing else going on in it.
Let's go ahead and start it out.
Guess I we started out as we always do with Jay queering would do with dollar sign right there and get
to open up a print to see it and the quotes were there and I'm a target and I did this time I'm going
to say Baity.
And so I when I target this I want the object to date in and I don't want it to happen.
I'm doing the event here.
Then click and the function of how that's going to work.
So they open and close parentheses open and close curly brackets right there and within there we will
say
it was with me that's
what I named my read on your text box.
The idea of text box so pounde a text box.
So my target this text box area down here and I was say fade in.
I mean you see it's already coming up here as a huge query options fade in.
Now to have the option to do is say how quickly do I want it to fade in.
And there were things done with engg query and really with most code is done in milliseconds so much
I'd say 3000 which is actually three seconds three thousand milliseconds.
And I say you can function open and close parentheses right there open and close the lips a curly brackets
get a couple of terms there.
And I want to give.
So I know that it's done and I say I create a little little papa Fox on my wall and give me a message
and I want to say I'm done.
So I know that it's all done fading in.
You don't have to do that.
It just kind of a nice lil thing we're going to use to show that it's actually done fading.
I get so created this idea of fade in and on click create a function that says anything within text
box.
I want to fade in over a duration of three seconds and then create other function within that says alert
when I am done.
So I've created the fade in option do I need to do two things here.
I opened up these two played need to close those out with our summit call them there and there.
And I'm going to do the fade out part now which is really very similar to what I just did.
But in fact I won't go out and just copy that bad guy and a couple of return's down here.
So instead of fade in Obviously when we use a new one new idea called fade out and again on click a
function here and we will still target the text box the same area.
And so the feeling in this time are going to fade out.
Be careful you don't change that.
If you don't change that it's going to not really work right.
So what I can do is sort of giving an actual duration of milliseconds I can create use a kind of predefined
thing called a fast or slow.
It's kind of like with CSSA where you can target a color by saying like red or black as opposed to using
a hexadecimal or some pre-built ones appear.
And I will again use my additional function here to create another alert that says I'm done bailing
out that I'll do when I'm done painting it just you know the difference up there down there.
Now just make sure the rest of our document is set up we have the query is all set up here to fade in
and out when I come down here those are still closed up properly.
That's good.
And I'm going to with it my style here I'm going to whoops my target the text box down here and I'm
going to just copy that just so I don't screw up typing that went up there I saw say it targets the
idea of text box open close.
And I will say
explain and begin with.
Do not display anything.
So now let's go and come down to our document down here and make sure that we have all this set up properly.
So we've got a text area down here.
This doesn't really matter.
Some old code to paragraph tags so anything within this text box here that is what's going to fade in
and out and kind of start out displaying as none.
So what I need to do is create the little triggers that we need to click on the events to turn this
Beta's and fade this out.
So we're going to create a link and doesn't need to actually go anywhere so we just use the little pound
sign.
But I do need to give it the proper ID.
Proper ID is going to be weighed in.
Make sure you spell them correctly.
If you use chemicals you use the dash or you did that make sure spelled exactly the same as you did
above.
Amitie go ahead and close out that and trying to Handels pastrycook's and for that they're going to
create a new one.
That fact just copy this guy to see a little of the typing here.
Now put a separator in there just to kind of separate them say it out.
But there's actually nothing in here right now so you get to close it up properly.
It's a mistake.
Fade in.
That's going to my text they click on to make this Faden.
And again I'm gonna screw up the code or after I say fade out.
All right so now with the moves properly typed up here H refereed in fade out.
Those are my ideas.
Fade in and out this text box here.
Fingers crossed that's going to take a look.
I call this document fading and I say that's excellent browser up here from a feeding document and drop
it in.
OK.
So so far it looks correct.
The text is not displayed.
So that's correct.
Now say fade in and looks like over about three seconds.
Textfield it in.
I got my alert that says I'm done feeding in.
Ok now I'm going to click on fade.
You see it faded out really fast.
It didn't do the three seconds like I did with the fade in.
Got the alert.
Here it says I'm all done fade now click OK.
So really cool stuff you can do with not just hiding and showing but actually fading in and all different
great stuff and play around with some of the different options up here with the fast or playing around
the milliseconds on how fast that fades in and out.
A lot of cool option is you can do there.