1
00:00:05,690 --> 00:00:10,760
Take a look at something else that's really cool called fading where I can actually make text or an

2
00:00:10,820 --> 00:00:13,700
object fade as a mouse over it and then back.

3
00:00:13,730 --> 00:00:18,800
And as a mouse away or whatever I want to do something like that it is kind of like a filter almost

4
00:00:18,800 --> 00:00:23,620
like a video filter kind of thing that's built into a group that we can target certain items with.

5
00:00:23,680 --> 00:00:25,630
I want to go and take a look at that now.

6
00:00:25,640 --> 00:00:32,480
So I created a new document and just called it called it fading up here using the same intro that I

7
00:00:32,540 --> 00:00:38,850
always use with my query code a document ready so whenever the document is ready we can apply the function

8
00:00:38,870 --> 00:00:41,530
and the code that we are going to apply here.

9
00:00:41,900 --> 00:00:44,860
So you've got a bunch of room here and nothing else going on in it.

10
00:00:44,870 --> 00:00:46,870
Let's go ahead and start it out.

11
00:00:46,910 --> 00:00:51,640
Guess I we started out as we always do with Jay queering would do with dollar sign right there and get

12
00:00:51,650 --> 00:00:57,470
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

13
00:00:57,470 --> 00:00:59,840
to say Baity.

14
00:00:59,910 --> 00:01:07,220
And so I when I target this I want the object to date in and I don't want it to happen.

15
00:01:07,400 --> 00:01:09,830
I'm doing the event here.

16
00:01:09,980 --> 00:01:16,620
Then click and the function of how that's going to work.

17
00:01:16,630 --> 00:01:23,070
So they open and close parentheses open and close curly brackets right there and within there we will

18
00:01:23,070 --> 00:01:23,640
say

19
00:01:28,760 --> 00:01:30,440
it was with me that's

20
00:01:33,510 --> 00:01:35,730
what I named my read on your text box.

21
00:01:35,730 --> 00:01:40,680
The idea of text box so pounde a text box.

22
00:01:40,680 --> 00:01:48,410
So my target this text box area down here and I was say fade in.

23
00:01:48,500 --> 00:01:53,060
I mean you see it's already coming up here as a huge query options fade in.

24
00:01:53,210 --> 00:01:56,890
Now to have the option to do is say how quickly do I want it to fade in.

25
00:01:57,240 --> 00:02:02,670
And there were things done with engg query and really with most code is done in milliseconds so much

26
00:02:02,770 --> 00:02:08,720
I'd say 3000 which is actually three seconds three thousand milliseconds.

27
00:02:09,750 --> 00:02:17,400
And I say you can function open and close parentheses right there open and close the lips a curly brackets

28
00:02:17,880 --> 00:02:20,080
get a couple of terms there.

29
00:02:20,670 --> 00:02:22,900
And I want to give.

30
00:02:23,180 --> 00:02:30,360
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

31
00:02:30,680 --> 00:02:34,280
and I want to say I'm done.

32
00:02:34,530 --> 00:02:37,530
So I know that it's all done fading in.

33
00:02:37,740 --> 00:02:38,900
You don't have to do that.

34
00:02:38,970 --> 00:02:43,630
It just kind of a nice lil thing we're going to use to show that it's actually done fading.

35
00:02:43,650 --> 00:02:50,490
I get so created this idea of fade in and on click create a function that says anything within text

36
00:02:50,490 --> 00:02:51,160
box.

37
00:02:51,210 --> 00:02:57,960
I want to fade in over a duration of three seconds and then create other function within that says alert

38
00:02:58,050 --> 00:03:00,550
when I am done.

39
00:03:00,600 --> 00:03:06,100
So I've created the fade in option do I need to do two things here.

40
00:03:06,150 --> 00:03:12,420
I opened up these two played need to close those out with our summit call them there and there.

41
00:03:12,810 --> 00:03:18,910
And I'm going to do the fade out part now which is really very similar to what I just did.

42
00:03:18,960 --> 00:03:24,940
But in fact I won't go out and just copy that bad guy and a couple of return's down here.

43
00:03:25,020 --> 00:03:33,810
So instead of fade in Obviously when we use a new one new idea called fade out and again on click a

44
00:03:33,840 --> 00:03:37,860
function here and we will still target the text box the same area.

45
00:03:38,160 --> 00:03:41,370
And so the feeling in this time are going to fade out.

46
00:03:41,370 --> 00:03:42,670
Be careful you don't change that.

47
00:03:42,690 --> 00:03:45,870
If you don't change that it's going to not really work right.

48
00:03:45,870 --> 00:03:54,540
So what I can do is sort of giving an actual duration of milliseconds I can create use a kind of predefined

49
00:03:54,540 --> 00:03:57,400
thing called a fast or slow.

50
00:03:57,570 --> 00:04:02,610
It's kind of like with CSSA where you can target a color by saying like red or black as opposed to using

51
00:04:02,610 --> 00:04:05,940
a hexadecimal or some pre-built ones appear.

52
00:04:06,420 --> 00:04:17,460
And I will again use my additional function here to create another alert that says I'm done bailing

53
00:04:17,520 --> 00:04:23,700
out that I'll do when I'm done painting it just you know the difference up there down there.

54
00:04:23,700 --> 00:04:28,140
Now just make sure the rest of our document is set up we have the query is all set up here to fade in

55
00:04:28,200 --> 00:04:32,250
and out when I come down here those are still closed up properly.

56
00:04:32,250 --> 00:04:34,370
That's good.

57
00:04:34,380 --> 00:04:42,630
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

58
00:04:42,630 --> 00:04:49,920
going to just copy that just so I don't screw up typing that went up there I saw say it targets the

59
00:04:49,920 --> 00:04:53,540
idea of text box open close.

60
00:04:53,580 --> 00:04:54,630
And I will say

61
00:04:57,440 --> 00:04:59,080
explain and begin with.

62
00:04:59,080 --> 00:05:01,400
Do not display anything.

63
00:05:01,400 --> 00:05:07,790
So now let's go and come down to our document down here and make sure that we have all this set up properly.

64
00:05:08,300 --> 00:05:12,320
So we've got a text area down here.

65
00:05:12,320 --> 00:05:13,780
This doesn't really matter.

66
00:05:13,950 --> 00:05:20,780
Some old code to paragraph tags so anything within this text box here that is what's going to fade in

67
00:05:20,780 --> 00:05:23,940
and out and kind of start out displaying as none.

68
00:05:24,140 --> 00:05:29,280
So what I need to do is create the little triggers that we need to click on the events to turn this

69
00:05:29,320 --> 00:05:31,760
Beta's and fade this out.

70
00:05:31,760 --> 00:05:36,980
So we're going to create a link and doesn't need to actually go anywhere so we just use the little pound

71
00:05:36,980 --> 00:05:37,460
sign.

72
00:05:37,480 --> 00:05:40,620
But I do need to give it the proper ID.

73
00:05:41,300 --> 00:05:45,530
Proper ID is going to be weighed in.

74
00:05:45,530 --> 00:05:46,860
Make sure you spell them correctly.

75
00:05:47,010 --> 00:05:51,380
If you use chemicals you use the dash or you did that make sure spelled exactly the same as you did

76
00:05:51,380 --> 00:05:52,370
above.

77
00:05:52,610 --> 00:06:00,800
Amitie go ahead and close out that and trying to Handels pastrycook's and for that they're going to

78
00:06:00,800 --> 00:06:02,210
create a new one.

79
00:06:02,280 --> 00:06:06,280
That fact just copy this guy to see a little of the typing here.

80
00:06:07,180 --> 00:06:11,750
Now put a separator in there just to kind of separate them say it out.

81
00:06:11,760 --> 00:06:17,160
But there's actually nothing in here right now so you get to close it up properly.

82
00:06:17,230 --> 00:06:18,480
It's a mistake.

83
00:06:18,480 --> 00:06:19,440
Fade in.

84
00:06:19,440 --> 00:06:21,560
That's going to my text they click on to make this Faden.

85
00:06:21,570 --> 00:06:27,360
And again I'm gonna screw up the code or after I say fade out.

86
00:06:27,360 --> 00:06:33,520
All right so now with the moves properly typed up here H refereed in fade out.

87
00:06:33,540 --> 00:06:34,830
Those are my ideas.

88
00:06:34,880 --> 00:06:36,690
Fade in and out this text box here.

89
00:06:36,690 --> 00:06:39,420
Fingers crossed that's going to take a look.

90
00:06:39,490 --> 00:06:48,860
I call this document fading and I say that's excellent browser up here from a feeding document and drop

91
00:06:48,860 --> 00:06:49,110
it in.

92
00:06:49,110 --> 00:06:49,460
OK.

93
00:06:49,500 --> 00:06:51,510
So so far it looks correct.

94
00:06:52,020 --> 00:06:53,700
The text is not displayed.

95
00:06:53,700 --> 00:06:54,780
So that's correct.

96
00:06:54,780 --> 00:06:58,370
Now say fade in and looks like over about three seconds.

97
00:06:58,400 --> 00:06:59,500
Textfield it in.

98
00:06:59,640 --> 00:07:02,730
I got my alert that says I'm done feeding in.

99
00:07:02,730 --> 00:07:05,250
Ok now I'm going to click on fade.

100
00:07:05,300 --> 00:07:07,040
You see it faded out really fast.

101
00:07:07,060 --> 00:07:10,520
It didn't do the three seconds like I did with the fade in.

102
00:07:10,520 --> 00:07:11,130
Got the alert.

103
00:07:11,130 --> 00:07:14,910
Here it says I'm all done fade now click OK.

104
00:07:14,930 --> 00:07:20,800
So really cool stuff you can do with not just hiding and showing but actually fading in and all different

105
00:07:20,810 --> 00:07:26,900
great stuff and play around with some of the different options up here with the fast or playing around

106
00:07:26,940 --> 00:07:29,830
the milliseconds on how fast that fades in and out.

107
00:07:29,940 --> 00:07:31,610
A lot of cool option is you can do there.