1
00:00:00,390 --> 00:00:04,450
jQuery offers many methods that can
help you easily manipulate the DOM.

2
00:00:04,450 --> 00:00:08,580
Manipulating DOM elements can include
adjusting an element's visibility

3
00:00:08,580 --> 00:00:12,660
as we've already seen with the hide
method, as well as adding, deleting, or

4
00:00:12,660 --> 00:00:17,710
modifying the contents or attributes of an
element and changing an element's styling.

5
00:00:17,710 --> 00:00:20,410
One area where jQuery
really shines is animation.

6
00:00:20,410 --> 00:00:24,380
There are several built-in methods that
allow you to use fun animations when you

7
00:00:24,380 --> 00:00:27,692
add, remove, or
reveal elements on a webpage.

8
00:00:27,692 --> 00:00:31,670
There's fadeIn and
Out which changes the opacity over time.

9
00:00:31,670 --> 00:00:35,588
You can literally see through the element
as it disappears or comes into view.

10
00:00:35,588 --> 00:00:40,160
slideDown() and slideUp() reveal
an element with a sliding motion.

11
00:00:40,160 --> 00:00:43,990
There's even a method called delay()
which lets you add a delay between two

12
00:00:43,990 --> 00:00:45,440
animations.

13
00:00:45,440 --> 00:00:46,990
For our first jQuery project,

14
00:00:46,990 --> 00:00:50,900
we'll use a few of these methods
to build a simple blog previewer

15
00:00:50,900 --> 00:00:54,960
with a flash message that appears
when the PREVIEW button is pressed.

16
00:00:54,960 --> 00:00:57,820
We won't actually be
building a functioning blog.

17
00:00:57,820 --> 00:01:02,210
That would require back end programming,
a database to store blog entries, and

18
00:01:02,210 --> 00:01:05,290
a lot of complex functionality
like user accounts

19
00:01:05,290 --> 00:01:07,450
that are beyond the scope of this course.

20
00:01:07,450 --> 00:01:11,370
Our project will simply allow the user to
preview what their blog entry will look

21
00:01:11,370 --> 00:01:14,820
like and
let them know the changes have been saved.

22
00:01:14,820 --> 00:01:16,130
Think of it as a prototype or

23
00:01:16,130 --> 00:01:20,540
demonstration of a feature you'd add
to a larger, more complex project.

24
00:01:20,540 --> 00:01:21,200
In this video,

25
00:01:21,200 --> 00:01:25,950
we'll create a flash message to learn
about animation methods in more detail and

26
00:01:25,950 --> 00:01:29,800
see how they can be used together
to create some pretty cool effects.

27
00:01:29,800 --> 00:01:33,650
A flash message is designed to show
a temporary message like a warning,

28
00:01:33,650 --> 00:01:36,430
confirmation, or alert to a user.

29
00:01:36,430 --> 00:01:39,630
Since the message is only
a temporary notification,

30
00:01:39,630 --> 00:01:44,210
we wanna show it when the page loads
then hide it after a few seconds delay.

31
00:01:44,210 --> 00:01:45,900
Later, we'll program the message so

32
00:01:45,900 --> 00:01:50,030
that it only displays once a user
clicks this PREVIEW button.

33
00:01:50,030 --> 00:01:54,735
But for now, the message and animation
will show each time the page is refreshed.

34
00:01:54,735 --> 00:01:58,940
Firstly, open up the workspace with
this video to follow along with me.

35
00:01:58,940 --> 00:02:02,230
If you'd rather work with your own text
editor, you can download the files for

36
00:02:02,230 --> 00:02:03,630
this course below.

37
00:02:03,630 --> 00:02:07,744
Here we have got an index.html file,
an app.js file, and

38
00:02:07,744 --> 00:02:11,612
a CSS folder,
which we won't be doing anything with but

39
00:02:11,612 --> 00:02:17,260
it's providing some styles to make
the blog previewer page look nice.

40
00:02:17,260 --> 00:02:20,680
I've already included the file
you'll need to use jQuery as well.

41
00:02:20,680 --> 00:02:21,200
Once again,

42
00:02:21,200 --> 00:02:25,590
I will show you how you can add jQuery to
your own projects later on in this course.

43
00:02:25,590 --> 00:02:28,780
Go ahead and go to app.js because
we're all ready to start coding.

44
00:02:29,960 --> 00:02:32,420
If we look at the index.html file,

45
00:02:32,420 --> 00:02:36,300
we can see there’s a div at the top
with an ID of flash message.

46
00:02:38,540 --> 00:02:43,030
In app.js, we’ll use the ID selector
to select the flash message element.

47
00:02:44,110 --> 00:02:48,170
Be sure to include the hash symbol
as we’re selecting an ID this time.

48
00:02:51,120 --> 00:02:53,550
Let's make the message fade into view.

49
00:02:53,550 --> 00:02:56,690
That means that first we need to hide
the message when the page loads.

50
00:02:59,470 --> 00:03:03,230
Let's save and refresh the preview to
make sure it's hidden, it is, great.

51
00:03:03,230 --> 00:03:06,710
Then we'll use a jQuery animation
effect to fade it into view.

52
00:03:06,710 --> 00:03:08,998
Let's try the fadeIn animation.

53
00:03:18,627 --> 00:03:20,160
So let's save and preview the page.

54
00:03:21,970 --> 00:03:26,970
As you can see, the message fades in
quite quickly, only 400 milliseconds.

55
00:03:26,970 --> 00:03:31,620
That's because all jQuery animations
last for 400 milliseconds by default.

56
00:03:31,620 --> 00:03:37,000
However, you can alter the time by passing
in a value to the jQuery animation method.

57
00:03:37,000 --> 00:03:39,100
To make the fade effect more obvious,

58
00:03:39,100 --> 00:03:41,750
let's fade the message
in over two seconds.

59
00:03:41,750 --> 00:03:44,878
To do that,
we'll pass 2,000 to the fadeIn method.

60
00:03:44,878 --> 00:03:48,590
There are 1,000 milliseconds
in each second.

61
00:03:48,590 --> 00:03:52,060
So 2,000 milliseconds is two seconds.

62
00:03:52,060 --> 00:03:54,163
Let's save and refresh the preview.

63
00:03:56,519 --> 00:03:58,920
And the message is now
appearing more slowly.

64
00:03:58,920 --> 00:04:00,730
Two seconds seems a bit too slow.

65
00:04:00,730 --> 00:04:03,915
Let's change it to 1,000 milliseconds,
or one second.

66
00:04:09,115 --> 00:04:10,260
And that's better.

67
00:04:10,260 --> 00:04:13,300
Now we wanna make the flash
message disappear.

68
00:04:13,300 --> 00:04:15,647
Let's use the slideUp method for that.

69
00:04:28,296 --> 00:04:30,140
Save the file and refresh the preview.

70
00:04:32,170 --> 00:04:35,360
We'll see the message appear and
disappear.

71
00:04:35,360 --> 00:04:36,635
It's a nice animiation but

72
00:04:36,635 --> 00:04:39,860
we aren't really allowing the user
enough time to read the message.

73
00:04:41,460 --> 00:04:43,615
We need to delay the animiation.

74
00:04:43,615 --> 00:04:47,210
jQuery has a delay method that
waits a given amount of time and

75
00:04:47,210 --> 00:04:49,406
then moves up to the next animation.

76
00:04:49,406 --> 00:04:53,544
I'm going to sandwich in a delay
call between fadeIn and slideUp.

77
00:05:01,108 --> 00:05:04,244
Let's give the user three
seconds to read the message and

78
00:05:04,244 --> 00:05:06,215
then slide the message out of view.

79
00:05:10,463 --> 00:05:12,178
Save and preview.

80
00:05:17,808 --> 00:05:22,697
The message fades in, we wait three
seconds, and it disappears, awesome.

81
00:05:22,697 --> 00:05:23,932
Instead of fadeIn,

82
00:05:23,932 --> 00:05:29,099
let's use slideDown as that animation is
complementary to the slide up animation.

83
00:05:35,700 --> 00:05:36,851
Save and preview.

84
00:05:41,011 --> 00:05:42,930
And that's looking pretty good.

85
00:05:42,930 --> 00:05:47,610
We can get the same effect in even
less code, jQuery let's you string or

86
00:05:47,610 --> 00:05:50,680
chain together methods
on the same element.

87
00:05:50,680 --> 00:05:54,056
In other words, you can chain all
the methods together like this.

88
00:06:03,176 --> 00:06:05,565
Writing the code like
this is more readable and

89
00:06:05,565 --> 00:06:10,220
saves us from having to select the flash
message div over and over again.

90
00:06:10,220 --> 00:06:14,395
We can see that we select the flash
message, hide it immediately,

91
00:06:14,395 --> 00:06:17,680
then reveal the message with a slideDown,

92
00:06:17,680 --> 00:06:22,440
wait three seconds, and
then slide the message back up.

93
00:06:22,440 --> 00:06:23,860
How does this work?

94
00:06:23,860 --> 00:06:28,140
Most jQuery methods return the same
element each time they're called.

95
00:06:28,140 --> 00:06:32,770
So when the hide method is called on the
flash message, jQuery hides the element,

96
00:06:32,770 --> 00:06:35,308
then returns a reference to that element.

97
00:06:35,308 --> 00:06:40,310
So calling slideDown next applies that
animation to the message element as well.

98
00:06:40,310 --> 00:06:43,220
You can think of it a bit
like a factory line.

99
00:06:43,220 --> 00:06:45,430
jQuery grabs the element from the page and

100
00:06:45,430 --> 00:06:49,095
passes it down the line where
each method does something to it.

101
00:06:49,095 --> 00:06:52,720
Chaining is a nice feature of jQuery
that makes your code easier to read and

102
00:06:52,720 --> 00:06:56,350
write but it can also get out of hand and
lead to long lines of code.

103
00:06:57,410 --> 00:06:59,588
If a line of jQuery is getting too long,

104
00:06:59,588 --> 00:07:02,230
you can add a new line at
every method like this.

105
00:07:04,910 --> 00:07:08,460
Indenting the method under the element
you're performing actions on

106
00:07:08,460 --> 00:07:09,930
helps with readability as well.

107
00:07:10,930 --> 00:07:14,670
Feel free to play around with this and
experiment with different animations and

108
00:07:14,670 --> 00:07:18,790
delay times and see what fun animation
sequences you can come up with.

109
00:07:19,830 --> 00:07:23,900
As you just saw it, jQuery has some really
nice animation methods that can add

110
00:07:23,900 --> 00:07:27,580
a little flair to the user
experience of your pages.

111
00:07:27,580 --> 00:07:28,930
In a short amount of time and

112
00:07:28,930 --> 00:07:33,510
with a relatively small amount of code,
we performed a complex animation sequence.

113
00:07:34,520 --> 00:07:38,660
You also saw how to write more
concise code with method chaining.

114
00:07:38,660 --> 00:07:43,560
You may now be starting to understand why
jQuery's motto is write less, do more.