1
00:00:00,330 --> 00:00:01,500
お帰りなさい。

2
00:00:01,500 --> 00:00:06,510
だから私が最初にJay

3
00:00:06,630 --> 00:00:08,820
queeryを紹介したとき、それはselect要素がイベントリスナーでそれらを操作するようなことをするのに役立つと言いました。

4
00:00:08,930 --> 00:00:11,990
また、エフェクトやアニメーションにも役立つと述べました。

5
00:00:12,180 --> 00:00:16,800
 

6
00:00:16,800 --> 00:00:22,000
このビデオでは、エフェクトに組み込まれているもののいくつかのクイックプレビューを行います。特に、フェーディングエフェクトとスライドの2つの広いカテゴリを示します。

7
00:00:22,250 --> 00:00:26,220
だから、ここではジェイ・コーリーがエフェクトカテゴリに乗っています。

8
00:00:26,280 --> 00:00:31,650
エフェクトとはかなり関係しているメソッドがあることがわかります。フェード効果を表示することから始めます。フェードアウトを開始して見ていきます。

9
00:00:31,650 --> 00:00:36,010
 

10
00:00:36,570 --> 00:00:41,900
 

11
00:00:41,910 --> 00:00:48,480
フェードアウトとは、ドル記号や要素のセットを選択し、その要素をフェードアウトさせ、その要素を完全な不透明度から完全な透明度またはゼロの不透明度にアニメートします。

12
00:00:48,480 --> 00:00:49,470
 

13
00:00:49,500 --> 00:00:56,130
だから基本的に要素を消してしまい、遅くても速くても非常に遅くしたいのであれば、時間を与えることができます。

14
00:00:56,220 --> 00:00:57,380
 

15
00:00:57,510 --> 00:00:59,690
ミリ秒単位で指定することができます。

16
00:00:59,700 --> 00:01:05,520
デフォルトは400ミリ秒です。最後に表示されるコールバックを提供することができます。

17
00:01:05,520 --> 00:01:06,630
 

18
00:01:06,780 --> 00:01:13,740
ここでは、このエフェクトスタディデモをデモンストレーションするために新しいファイルを作成します。最後のデモページから構造をコピーして、Jクエリー効果を呼び出します。

19
00:01:13,740 --> 00:01:18,660
 

20
00:01:18,960 --> 00:01:24,480
だから我々はそれを設定して、私はここでこのコンテンツをすべて取り除くつもりだし、次に私はいくつかのdivを追加するつもりです。

21
00:01:24,480 --> 00:01:27,000
 

22
00:01:27,120 --> 00:01:33,240
3つのdivを作って、これらのdivを使用してそれらを消してアニメーションし、上下にスライドさせましょう。

23
00:01:33,240 --> 00:01:34,340
 

24
00:01:34,450 --> 00:01:43,620
そして、私はこれらの最初のものの中にいくつかのコンテンツを与えるつもりです、これらは私を次のものにフェードしないでください。

25
00:01:43,620 --> 00:01:45,470
 

26
00:01:45,900 --> 00:01:48,300
私はあなたにお願いしています。

27
00:01:48,660 --> 00:01:52,380
そして、最後に私たちはヘルプが助けになると言います。

28
00:01:52,720 --> 00:01:55,790
だから、これらの部門は消え去られたくはない。

29
00:01:56,040 --> 00:01:58,210
残念ながら、今日は幸運な日ではありません。

30
00:01:58,410 --> 00:02:00,230
そして、私たちは彼らと戦うつもりです。

31
00:02:00,240 --> 00:02:05,280
このことをより明確にするために、ここで私たちの生活にいくつかのスタイルを加えて、色が消えるようにします。

32
00:02:05,280 --> 00:02:06,720
 

33
00:02:07,110 --> 00:02:10,900
また、幅と高さもあり、上下にスライドできます。

34
00:02:10,950 --> 00:02:20,200
だから私はすべてのdivを選択し、100ピクセルと100ピクセルの高さとティールの色の背景を与え、保存してみましょう。これを開くでしょう。

35
00:02:20,220 --> 00:02:28,150
 

36
00:02:28,860 --> 00:02:30,420
私たちには3つの部門があります。

37
00:02:30,420 --> 00:02:32,570
しかし、私は彼らが同じ行にいてほしいです。

38
00:02:32,880 --> 00:02:36,900
ですから、それを行う1つの方法は、フロートが残っていることです。

39
00:02:37,020 --> 00:02:39,880
今、彼らはすべて同じ線にありますが、彼らはお互いに出血します。

40
00:02:40,200 --> 00:02:43,020
だから我々はマージンを追加することができます。

41
00:02:43,020 --> 00:02:46,850
だから、我々はすべての面で20ピクセルのマージンを行うだけです。

42
00:02:46,860 --> 00:02:51,930
今度は3つの正方形で終わり、それぞれの中にテキストがいくつかあります。私たちがしようとしていることは、それらをどのようにフィットさせることができるのかを示すことなので、

43
00:02:51,930 --> 00:02:56,740
 

44
00:02:57,060 --> 00:03:03,060
そこで、ここにボタンを追加して、このボタンをクリックするだけです。

45
00:03:03,270 --> 00:03:08,000
このボタンをクリックすると、アニメーションが実行されます。

46
00:03:08,220 --> 00:03:12,760
だから私はこれをクリックして、これらの3つの項目がフェードアウトして開始するはずです。

47
00:03:13,320 --> 00:03:19,350
したがって、フェードアウトを繰り返すには、要素を完全な不透明度から取得するか、すべての不透明度から要素を取得します。これは現在、完全な透明性の点まであります。

48
00:03:19,650 --> 00:03:22,500
 

49
00:03:22,500 --> 00:03:29,730
だから、この選択されたドットフェードアウトのように見えます。速度のオプションの文字列をゆっくりと高速に提供するか、または数ミリ秒を与えることができます。

50
00:03:29,730 --> 00:03:33,370
 

51
00:03:33,390 --> 00:03:34,490
それでは、今私にあなたを見せてください。

52
00:03:34,740 --> 00:03:39,870
私は実際に別のファイルでこれを行うつもりですので、javascriptファイルを作成して保存します。

53
00:03:40,250 --> 00:03:45,000
私はそれがちょうど天才に影響を及ぼし、私の警報が接続され、これを正確に底をつなぎ合わせて安全に保存していると呼ぶでしょう。

54
00:03:47,940 --> 00:03:52,470
 

55
00:03:52,470 --> 00:03:54,020
スクリプトタグを追加するだけです。

56
00:03:54,480 --> 00:03:56,450
ソースは効果と等しい。

57
00:03:56,560 --> 00:03:57,320
はい。

58
00:03:57,690 --> 00:04:01,030
リフレッシュすると、接続アラートが表示されます。

59
00:04:01,350 --> 00:04:04,380
だから私たちがここでやりたいことは、これらの部門を救済することです。

60
00:04:04,380 --> 00:04:10,040
だから私たちはそのようなデバイスを選択し、フェードアウトしないようにする必要があります。

61
00:04:10,380 --> 00:04:13,290
そして、私たちはスピードを提供するか、それをそのままにしておくことができます。

62
00:04:13,290 --> 00:04:20,630
そして、それが私たちがやりたい、またはリフレッシュしたいことばかりで、ページが読み込まれると、それらが消えていくのを見ることができます。

63
00:04:20,640 --> 00:04:23,740
実際にボタンをクリックすると、そのことが起こります。

64
00:04:24,090 --> 00:04:34,800
だから、ドル記号のボタンドットをしたいと思っています。私たちはクリックをするか、ドットを素早く行い、コールバック関数を渡します。

65
00:04:36,300 --> 00:04:38,480
 

66
00:04:38,640 --> 00:04:47,770
だから、私たちがクリックすると、そのようなすべてのdivが消えて、今リフレッシュされます。クリックすると、すべてが消えます。

67
00:04:48,490 --> 00:04:50,870
 

68
00:04:50,980 --> 00:04:56,060
私が言及したように、ここでは1000秒のような数字をここに入力することができます。

69
00:04:56,260 --> 00:05:02,370
私がリフレッシュすると、クリックすると表示されますが、フェードアウトするには完全な秒がかかります。

70
00:05:02,620 --> 00:05:09,580
フェードアウトの重要なポイントは、私がここのページを調べて、要素を見るとdivがまだ寮にいるかのどちらかであることです。

71
00:05:09,580 --> 00:05:12,400
 

72
00:05:12,430 --> 00:05:15,760
彼らの表示がnoneに設定されているため、表示されません。

73
00:05:15,760 --> 00:05:18,730
したがって、それらは削除されず、ページから削除されません。

74
00:05:18,910 --> 00:05:20,010
それは単にそれらを隠しているだけです。

75
00:05:20,170 --> 00:05:22,890
それは間違いなく重要な違いです。

76
00:05:22,990 --> 00:05:28,960
 

77
00:05:28,960 --> 00:05:35,150
それで、divが消えてしまったときにメッセージを印刷して消してしまい、ログを取り消したときに消えてしまったようなことをしたいとしましょう。

78
00:05:35,680 --> 00:05:39,590
私がこれを実行すると、私はコンソールを開き、物事が起こる順序を見ます。

79
00:05:39,730 --> 00:05:45,800
だから私がここをクリックすると、フェードが実際に行われる前にフェードが完了する。

80
00:05:46,090 --> 00:05:51,490
ここで何が起こるかは、すべてのdivを選択してフェードアウトを開始することですが、それは完全な秒を要します。

81
00:05:52,060 --> 00:05:56,280
そしてjavascriptは、次の行に移動する前にその秒が終わるのを待たない。

82
00:05:56,350 --> 00:06:02,310
それはすぐにこの行に移動し、フェードアウトを印刷し、その後フェードアウトが終了します。

83
00:06:02,470 --> 00:06:08,230
フェードアウトが終了した直後にコードを実行させたい場合は、ここでコールバックを渡すことができるようにしたいと考えています。

84
00:06:08,680 --> 00:06:11,390
 

85
00:06:11,440 --> 00:06:16,860
したがって、このコールバックはフェードアウトの内部で自動的に呼び出されます。

86
00:06:17,020 --> 00:06:20,830
だから私は一定のログをそこに移動して保存します。

87
00:06:21,300 --> 00:06:29,530
そして、私がリフレッシュして、今度はフェードアウトの終了をクリックすると、3つのフェードが完成しました。

88
00:06:29,540 --> 00:06:31,650
 

89
00:06:31,690 --> 00:06:37,390
領事館に文字列を印刷するだけでなく、より一般的なシナリオは、消してしまった要素を実際に削除することです。

90
00:06:37,390 --> 00:06:39,220
 

91
00:06:39,220 --> 00:06:42,580
だから私は彼らが実際に行っていない隠されていることに言及した。

92
00:06:42,660 --> 00:06:47,350
そして、リストのように削除したい場合は、ゆっくりとフェードアウトしたいアイテムの横にあるゴミ箱をクリックしてビルドします。

93
00:06:47,350 --> 00:06:51,940
 

94
00:06:52,060 --> 00:06:55,620
しかし、DOMからページを完全に削除するだけです。

95
00:06:55,810 --> 00:07:02,320
したがって、removeというメソッドを使用する必要があります。フェードアウトが終了した後に削除するだけです。

96
00:07:03,340 --> 00:07:09,460
だから、これはちょうどこれを削除しますように見えます。

97
00:07:10,010 --> 00:07:13,930
そしてこれが何をするかは、フェードアウトが終了するまで待つことです。

98
00:07:13,990 --> 00:07:17,050
各divに対して、Removeメソッドが実行されます。

99
00:07:17,050 --> 00:07:20,430
リフレッシュして、私をクリックしてください。

100
00:07:21,100 --> 00:07:26,650
フェードアウトすると、要素に移動すると、現在はボタンだけしか表示されず、divのすべてが完全に消滅していることがわかります。

101
00:07:26,650 --> 00:07:29,850
 

102
00:07:30,100 --> 00:07:36,520
私がその行をコメントアウトしてリフレッシュすると、ここで3つのdivをどこから開始すればいいのかを知ることができます。

103
00:07:36,520 --> 00:07:39,130
 

104
00:07:39,160 --> 00:07:42,910
それらは消えて表示され、noneに設定されます。

105
00:07:42,910 --> 00:07:51,340
だから私が間違った場所に自分のコードを入れて、ここでRemoveメソッドを実行したところ、すべてのdivsドットがそのように削除されました。

106
00:07:51,430 --> 00:07:52,850
 

107
00:07:52,900 --> 00:07:57,080
実際に起こるのは、注文が保証されていないということです。

108
00:07:57,280 --> 00:07:59,210
そして、これは完全な秒を取るつもりです。

109
00:07:59,410 --> 00:08:01,800
そして、このコードは、その秒が終わるのを待つことはありません。

110
00:08:01,930 --> 00:08:06,410
だから、フェードアウトしてすぐに削除を実行します。

111
00:08:06,610 --> 00:08:13,150
だから、このように見えるようになり、消え始めたらすぐ消えてしまいます。

112
00:08:13,780 --> 00:08:16,450
基本的には全くフェードしません。

113
00:08:16,480 --> 00:08:17,110
だからこそJ.

114
00:08:17,110 --> 00:08:21,940
 

115
00:08:21,940 --> 00:08:26,810
Coreyはこのコールバックを提供しています。なぜなら、何かを消したり、アニメーションが何かをスライドさせたりした後に、何かをしたいと思っているのはかなり一般的です。

116
00:08:26,830 --> 00:08:30,760
それで私は私の次のポイントになります。これは私たちがやっていくことができる他のアニメーションのいくつかを示したいので、私たちは物事を消すこともできます。

117
00:08:30,760 --> 00:08:33,790
 

118
00:08:34,030 --> 00:08:40,920
だから、私がこのような最初にnoneになるようにディスプレイを設定すると、私はリフレッシュします。

119
00:08:41,020 --> 00:08:46,780
私たちはdivを表示しません。なぜなら、クリックしたときにフェードアウトするのではなく隠されているからです。フェードインすることができます。期待どおりに動作します。

120
00:08:46,780 --> 00:08:49,840
 

121
00:08:49,840 --> 00:08:55,720
ボタンをクリックすると、1秒以上経過するとフェードインします。その後、コードが実行されていることがわかったときにコードを実行したい場合は、コードを入力してコールバックを行うことができます。

122
00:08:55,720 --> 00:09:00,350
 

123
00:09:00,970 --> 00:09:02,310
さあ、それはぼんやりしている。

124
00:09:02,350 --> 00:09:09,610
GKは、FaidトグルとFaidトグルと同じように動作する1つのより良いフェードメソッドを提供します。

125
00:09:10,660 --> 00:09:16,330
私は数ミリ秒を提供し、それが現在表示されているかどうかに応じて、何かをフェードインまたはフェードする必要があるかどうかを知るでしょう。

126
00:09:16,330 --> 00:09:18,080
 

127
00:09:18,310 --> 00:09:25,360
だから私がリフレッシュして、フェードトグルをクリックすると、それらをすべて送り込み、それらをすべてフェードアウトして戻すことによって開始されます。

128
00:09:25,360 --> 00:09:27,020
 

129
00:09:27,040 --> 00:09:32,500
基本的には、クラスリストにクラスを追加するか、フェードインまたはフェードアウトする必要があるかどうかを決定するJay

130
00:09:32,500 --> 00:09:35,860
Querreyと一緒にトグルクラスを使用することです。

131
00:09:35,860 --> 00:09:43,960
それで、私が実証しようとしている次の一連の効果が消えていくのは、これらのスライド効果です。

132
00:09:44,320 --> 00:09:49,170
ここでは、スライドを下にスライドさせてスライドさせます。

133
00:09:49,240 --> 00:09:55,270
だから、私はスライドダウンから始め、Faidのような要素に不透明度をアニメーション化するのではなく、現在表示されていない要素を取り除くことで、要素の高さを実際にアニメーション化します。

134
00:09:55,270 --> 00:10:00,640
 

135
00:10:01,090 --> 00:10:03,030
だから私はそれがどのように動作するかをお見せしましょう。

136
00:10:03,130 --> 00:10:04,300
私たちはこれを変更しようとしています。

137
00:10:04,300 --> 00:10:07,870
フェードトグルではなく、ただスライドします。

138
00:10:08,650 --> 00:10:11,810
それは、リフレッシュするとエレメントが隠されるからです。

139
00:10:11,920 --> 00:10:19,000
私がボタンをクリックしたときにスライドを実行すると、高さがアニメーションされ、同じことがスライドアップすることがわかります。

140
00:10:19,000 --> 00:10:21,270
 

141
00:10:21,400 --> 00:10:22,420
それは反対です。

142
00:10:22,480 --> 00:10:26,360
だから私は彼らが表示されるように表示を取り除く場合。

143
00:10:26,710 --> 00:10:28,630
そして今、ボタンをクリックします。

144
00:10:28,630 --> 00:10:33,590
それらの高さはアニメートされ、上方向にスライドし、最後にNoneに設定されます。

145
00:10:33,910 --> 00:10:41,540
そして、もう一つの方法は、それが何をすべきかを決めるところのフェードトグルのように機能するスライドトグルです。

146
00:10:41,650 --> 00:10:48,090
だから私がクリックすると、それらがスライドして、今度はスライドして上下に戻る。

147
00:10:48,370 --> 00:10:51,740
だからこそ、スライドを上にスライドさせてスライドトグルすることがあります。

148
00:10:51,760 --> 00:10:54,320
彼らはFaidアナログメソッドと同じようなものでした。

149
00:10:54,610 --> 00:10:57,580
私たちが渡すことができるオプションのコールバックもあります。

150
00:10:57,790 --> 00:11:04,250
だから、1秒のような時間を与えてから、私のコールを戻すことができます。

151
00:11:04,600 --> 00:11:09,380
そして私はちょうど別の罪を犯すでしょう。 最後のスライドでそのログが行われます。

152
00:11:09,730 --> 00:11:15,250
そしてそれは完全な第2のスライドが終わったときにのみ印刷されます。

153
00:11:15,250 --> 00:11:16,130
だから私はリフレッシュします。

154
00:11:16,270 --> 00:11:24,970
コンソールを見てみましょう。彼らは私をクリックしてクリックします。スライドが完了すると、これが表示されます。

155
00:11:24,970 --> 00:11:25,630
 

156
00:11:25,630 --> 00:11:28,380
ここでも同じことが注目されています。

157
00:11:28,390 --> 00:11:31,330
これは6に変更されます。

158
00:11:31,330 --> 00:11:32,630
そこに行く。

159
00:11:33,290 --> 00:11:40,510
しかし、やはりより一般的なパターンは、アイテムを外したり消したりしたときにアイテムを削除することです。削除したアイテムは削除することです。

160
00:11:40,510 --> 00:11:43,670
 

161
00:11:43,690 --> 00:11:48,400
そこでここをスライドさせるのに1秒かかると、ページから削除されます。

162
00:11:48,460 --> 00:11:53,970
要素タブに行くと、そのボタンとスクリプトを除いて、私たちの体は空になります。

163
00:11:54,580 --> 00:11:58,810
だからうまくいけば、彼らはあなたに、採石場での影響のいくつかがどのようになっているかを知ることができます。

164
00:11:58,810 --> 00:12:02,110
これらは、はるかに一般的なフェージングとスライドです。

165
00:12:02,110 --> 00:12:06,190
そして、私たちは、私たちが次のビデオで始めるリストアプリを行う代わりに、それらを使うつもりです。