1
00:00:00,330 --> 00:00:01,500
歡迎回來。

2
00:00:01,500 --> 00:00:08,820
所以，當我最初推出周杰倫queery我提到，它可以幫助我們做這樣的事情中選擇元素，在事件偵聽器操縱它們。

3
00:00:08,930 --> 00:00:11,990
我還提到，它有助於效果和動畫。

4
00:00:12,180 --> 00:00:22,000
因此，在這個視頻，我會做一些非內建的效果的快速預覽特別是我要展示的效果褪色效果和幻燈片兩大類。

5
00:00:22,250 --> 00:00:26,220
所以我對周杰倫科瑞碼頭在這裡的影響類別。

6
00:00:26,280 --> 00:00:36,010
你可以看到有相當的有效果做了幾個方法，我要去展示，所以我要去看看淡出，開始淡出效果啟動。

7
00:00:36,570 --> 00:00:49,470
什麼淡出所做的就是選擇一個美元符號或一組元素的元素，並調用其上淡出，它會動態顯示元素從完全不透明到完全透明或不透明為零。

8
00:00:49,500 --> 00:00:57,380
因此，它基本上淡出元素了，如果你希望它是慢或快或非常慢，你可以提供一個持續時間。

9
00:00:57,510 --> 00:00:59,690
您可以提供毫秒數。

10
00:00:59,700 --> 00:01:06,630
默認值是400毫秒，那麼你就可以提供一個回調到我會在短短的時刻顯示結束運行。

11
00:01:06,780 --> 00:01:18,660
所以我要做一個新的文件在這裡展示這種效果研究演示，我會剛剛超過我們的結構從過去的演示頁複印，這人會打電話Ĵ奎裡的效果。

12
00:01:18,960 --> 00:01:27,000
因此，我們有一個設置，我要去到這裡擺脫所有這些內容，然後我會在幾個div的補充。

13
00:01:27,120 --> 00:01:34,340
讓我們做三div的，我們要使用這兩個div和淡化出來，為它們製作動畫和幻燈片，然後上下。

14
00:01:34,450 --> 00:01:45,470
所以，我想給他們這第一個裡面的一些內容將是這些不褪色我下一個。

15
00:01:45,900 --> 00:01:48,300
我求你了，請。

16
00:01:48,660 --> 00:01:52,380
然後，最後我們會有一個說幫助幫助幫助。

17
00:01:52,720 --> 00:01:55,790
因此，這些div的是絕望不能消失。

18
00:01:56,040 --> 00:01:58,210
不幸的是今天不是他們的幸運日。

19
00:01:58,410 --> 00:02:00,230
而我們將要戰鬥出來。

20
00:02:00,240 --> 00:02:06,720
因此，為了使之更清楚我將一些風格這裡加入到我們的生活，讓他們有一個顏色，我們可以看到消逝。

21
00:02:07,110 --> 00:02:10,900
他們也有一個寬度和高度，我們可以看到上下滑動。

22
00:02:10,950 --> 00:02:28,150
所以我要選擇所有div，給他們一個擁有100像素和100像素的高度和青色的背景顏色，讓我們保存，我們將打開這個了。

23
00:02:28,860 --> 00:02:30,420
我們有三個div的。

24
00:02:30,420 --> 00:02:32,570
不過，我想他們是在同一行。

25
00:02:32,880 --> 00:02:36,900
因此，要做到這一點的一種方法是用浮動左邊。

26
00:02:37,020 --> 00:02:39,880
現在，他們都在同一行，但他們滲入對方。

27
00:02:40,200 --> 00:02:43,020
因此，要解決這個問題，我們可以添加一個餘量。

28
00:02:43,020 --> 00:02:46,850
所以我們只是做的各方20像素的保證金。

29
00:02:46,860 --> 00:02:56,740
現在我們結束了三個廣場和他們每個人都有裡面的一些文字，我們真的不需要去過分造型它們，因為所有我們要做的是證明我們如何能夠進出適合他們。

30
00:02:57,060 --> 00:03:03,060
因此，我們要在這裡添加一個按鈕往上頂和這個按鈕將只說按我。

31
00:03:03,270 --> 00:03:08,000
而當我們點擊這個按鈕會發生什麼事是，我們的動畫將運行。

32
00:03:08,220 --> 00:03:12,760
於是我點擊這個和這三個項目應該淡出啟動。

33
00:03:13,320 --> 00:03:22,500
因此，要重申淡出將採取從元素完全不透明或任何不透明這是目前褪到完全透明的地步。

34
00:03:22,500 --> 00:03:33,370
所以它看起來像這樣選擇點淡出，我們可以提供速度的可選字符串，慢或快或者我們可以給它一個毫秒數。

35
00:03:33,390 --> 00:03:34,490
因此，讓我告訴你，現在。

36
00:03:34,740 --> 00:03:39,870
實際上，我要做到這一點在一個單獨的文件，所以我要做一個javascript文件和保存。

37
00:03:40,250 --> 00:03:52,470
我會打電話給它影響只是天才保存安全是有我的警覺連接和正確鏈接了一起底部。

38
00:03:52,470 --> 00:03:54,020
只需添加腳本標記。

39
00:03:54,480 --> 00:03:56,450
來源等於影響。

40
00:03:56,560 --> 00:03:57,320
是。

41
00:03:57,690 --> 00:04:01,030
如果我們刷新我們得到我們連接的警報。

42
00:04:01,350 --> 00:04:04,380
所以，我們要在這裡做的是FAID這些div的出來。

43
00:04:04,380 --> 00:04:10,040
因此，我們需要選擇的設備就是這樣，而不是淡出。

44
00:04:10,380 --> 00:04:13,290
然後，我們可以提供速度或讓它這樣。

45
00:04:13,290 --> 00:04:20,630
如果這就是我們想要做或刷新，你可以看到他們開始褪色了頁面加載。

46
00:04:20,640 --> 00:04:23,740
因此，讓我們真正做到這一點，當我們單擊按鈕。

47
00:04:24,090 --> 00:04:38,480
所以，我們要想做一個美元符號按鈕點，我們可以做任何點擊，不然我會做快速的點，然後通過我們的回調函數。

48
00:04:38,640 --> 00:04:50,870
所以，當我們點擊之後就會淡出所有的div就這樣，現在會刷新，如果我點擊你可以看到他們都淡出。

49
00:04:50,980 --> 00:04:56,060
因此，正如我所說，我們可以提供一些在這裡像1000這是一個完整的第二。

50
00:04:56,260 --> 00:05:02,370
如果我刷新你會看到，當我點擊它需要一整秒為他們淡出。

51
00:05:02,620 --> 00:05:12,400
有關淡出重要的一點是，如果我在這裡檢查頁面，看看我的元素的div都還在隊中，仍然只是在宿舍裡。

52
00:05:12,430 --> 00:05:15,760
我們只是不想看到他們，因為他們的顯示器已經設置為none。

53
00:05:15,760 --> 00:05:18,730
所以它不會刪除或不從網頁刪除。

54
00:05:18,910 --> 00:05:20,010
它只是隱藏它們。

55
00:05:20,170 --> 00:05:22,890
這肯定是一個很重要的區別。

56
00:05:22,990 --> 00:05:35,150
所以我們說，我想只是打印一條消息，一旦過的div淡出，所以我會淡出出來，然後做這樣的事情褪色完成，因為它取消了日誌。

57
00:05:35,680 --> 00:05:39,590
如果我運行此我將打開控制台，並觀看了事情發生的順序。

58
00:05:39,730 --> 00:05:45,800
所以，當我點擊這裡我得到FAID完成的方式之前淡出實際完成的。

59
00:05:46,090 --> 00:05:51,730
所以，這裡所發生的是，我們選擇所有的div，我們開始淡出，但它需要一個完整的第二。

60
00:05:52,060 --> 00:05:56,280
和JavaScript並不等待第二個完成它移動到下一行之前。

61
00:05:56,350 --> 00:06:02,310
它會立即移動到該行，並打印出FAID完成，然後淡出結束。

62
00:06:02,470 --> 00:06:11,390
因此，如果我們想要的代碼發生淡出我們希望它保證是後我們可以在回調這裡傳遞結束後的權利。

63
00:06:11,440 --> 00:06:16,860
所以這個回調時自動把它完成了淡出的內部調用。

64
00:06:17,020 --> 00:06:20,830
所以，我要在那裡將我們不斷的日誌和保存。

65
00:06:21,300 --> 00:06:31,650
如果我刷新，現在我點擊淡出結束，然後我們得到的每一個3淡入完成控制台點日誌。

66
00:06:31,690 --> 00:06:39,220
更常見的情況，而不是僅僅打印出的領事字符串是一旦我們淡化他們實際刪除元素。

67
00:06:39,220 --> 00:06:42,580
所以，我提到，他們只是隱藏他們沒有真正消失。

68
00:06:42,660 --> 00:06:51,940
如果我們要刪除他們像我們做的名單上，我們要建立當我們點擊垃圾桶旁邊，我們想要一個項目就淡出慢慢地做一個漂亮的動畫。

69
00:06:52,060 --> 00:06:55,620
但後來也只是刪除了該頁面完全關閉DOM。

70
00:06:55,810 --> 00:07:03,180
因此，我們需要使用一個方法調用撈出，我們只希望淡出完成後刪除它。

71
00:07:03,340 --> 00:07:09,460
這樣看起來，這將只是這樣做刪除。

72
00:07:10,010 --> 00:07:13,930
而這是什麼會做的就是等待，直到淡出結束。

73
00:07:13,990 --> 00:07:17,050
而對於每個div會在其上運行Remove方法。

74
00:07:17,050 --> 00:07:20,430
因此，刷新並單擊單擊我的。

75
00:07:21,100 --> 00:07:29,850
他們淡出，然後如果我們去到的元素，你可以看到，我們的身體只有一個按鈕現在和標籤所有的div都完全消失了。

76
00:07:30,100 --> 00:07:39,130
如果我評論說，線路輸出和刷新你可以看到他們在這裡開局三div的，我點擊按鈕，所發生的一切。

77
00:07:39,160 --> 00:07:42,910
他們逐漸消失，然後顯示設置為none。

78
00:07:42,910 --> 00:07:52,850
所以，如果我把我的代碼錯了地方，我在這裡跑下來刪除方法我做的所有div點刪除就這樣。

79
00:07:52,900 --> 00:07:57,080
究竟會發生的是，為了不被保證。

80
00:07:57,280 --> 00:07:59,210
這是要採取一個完整的第二。

81
00:07:59,410 --> 00:08:01,800
而這個代碼將不會等待第二個結束。

82
00:08:01,930 --> 00:08:06,410
因此，將開始淡出，然後運行後立即刪除。

83
00:08:06,610 --> 00:08:13,490
這樣結束了看起來像這樣的地方開始褪色，只是立即將其刪除它們後。

84
00:08:13,780 --> 00:08:16,450
因此，它基本上是不褪色的。

85
00:08:16,480 --> 00:08:17,110
所以這就是為什麼J.

86
00:08:17,110 --> 00:08:26,810
科裡，因為它是很常見的為我們想要做的事，我們淡出東西出來後提供此回調或之後，我們滑動下來的東西或任何動畫。

87
00:08:26,830 --> 00:08:33,790
所以這使我想到我的下一個點，這是我想說明一些其他動畫，我們可以做到這一點，我們也可以淡入的東西。

88
00:08:34,030 --> 00:08:40,920
所以，如果我將顯示器設置為none在這樣的開始，我刷新。

89
00:08:41,020 --> 00:08:49,840
我們看不到的div，因為現在他們藏而不褪色出來，當我們點擊我們可以淡化他們和它的作品就像你期望的那樣。

90
00:08:49,840 --> 00:09:00,350
點擊按鈕，它們消失在了第二，然後如果我們想以後運行一些代碼時，我們知道他們是在我們做了褪色可以把一些代碼，如果這裡的回調說。

91
00:09:00,970 --> 00:09:02,310
好吧所以這是Faden。

92
00:09:02,350 --> 00:09:10,400
GK提供了被稱為FAID切換多了一個不錯的漸漸方法和FAID切換的工作方式相同。

93
00:09:10,660 --> 00:09:18,080
我公司提供的毫秒數，它會知道是否需要或縮小取決於它是否當前顯示或不褪色的東西。

94
00:09:18,310 --> 00:09:27,020
所以，如果我刷新和我淡出單擊切換它開始餵養它們都在，然後淡出大家都出去了，並回。

95
00:09:27,040 --> 00:09:35,860
它基本上如添加類類列表或使用切換類傑伊·奎裡它只是決定是否需要淡入或淡出。

96
00:09:35,860 --> 00:09:44,260
好吧，這樣的衰落下一組，我想證明在這些滑動效果的影響。

97
00:09:44,320 --> 00:09:49,170
所以在這裡下來，我們有向下滑動開關滑動，滑動。

98
00:09:49,240 --> 00:10:01,060
所以我會用幻燈片開始下來，它的作用是它需要，因此目前不顯示，而不是一個元素上動畫的不透明度喜歡FAID它實際上動畫元素的高度的元素。

99
00:10:01,090 --> 00:10:03,030
所以，我會告訴你如何工作的。

100
00:10:03,130 --> 00:10:04,300
我們都不會改變這一點。

101
00:10:04,300 --> 00:10:07,870
而不是淡化撥動我們就滑下。

102
00:10:08,650 --> 00:10:11,810
那是因為當我們刷新我們的元素是隱藏的。

103
00:10:11,920 --> 00:10:21,270
所以，如果我跑滑下，當我們點擊一個按鈕，你會看到高度動畫下來，同樣的事情會向上滑動。

104
00:10:21,400 --> 00:10:22,420
這則相反。

105
00:10:22,480 --> 00:10:26,360
所以，如果我得到這樣他們表現出擺脫顯示屏。

106
00:10:26,710 --> 00:10:28,630
現在我按一下按鈕。

107
00:10:28,630 --> 00:10:33,590
他們的身高是動畫和他們的幻燈片向上，然後在結束時顯示設置為無。

108
00:10:33,910 --> 00:10:41,540
而另一種方法是幻燈片切換它的作品就像FAID撥動它決定做什麼。

109
00:10:41,650 --> 00:10:48,090
所以，如果我點擊他們的幻燈片了，現在滑下和背部上下。

110
00:10:48,370 --> 00:10:51,740
所以，這一切就是向上滑動滑和幻燈片切換。

111
00:10:51,760 --> 00:10:54,320
他們只是像他們FAID模擬方法。

112
00:10:54,610 --> 00:10:57,580
還有一個可選的回調，我們可以通過。

113
00:10:57,790 --> 00:11:04,250
所以，如果我們給一個時間像1秒鐘，然後我可以得到我的電話回。

114
00:11:04,600 --> 00:11:09,380
我會只是做另一個騙子。該日誌結尾滑動完成。

115
00:11:09,730 --> 00:11:15,250
而一旦完全第二張幻燈片已完成，將只打印出來。

116
00:11:15,250 --> 00:11:16,130
所以我刷新。

117
00:11:16,270 --> 00:11:25,630
讓我們看一下控制台和他們點擊點擊我，你可以看到，一旦幻燈片做這只打印。

118
00:11:25,630 --> 00:11:28,380
這裡同樣的事情在這裡要注意。

119
00:11:28,390 --> 00:11:31,330
這將改變到六個。

120
00:11:31,330 --> 00:11:32,630
在那裡，我們走了。

121
00:11:33,290 --> 00:11:43,670
但同樣一種較為常見的模式是刪除的項目一旦我們他們滑動，或淡出出來或任何我們所做的就是將其刪除。

122
00:11:43,690 --> 00:11:48,400
因此，這裡將採取第二滑動他們，然後他們從頁面移除。

123
00:11:48,460 --> 00:11:53,970
如果我們去的元素標籤我們的身體，除了那個按鈕，在腳本空。

124
00:11:54,580 --> 00:11:58,810
所以希望他們給你一些如何在一個採石場工作的影響是一個好主意。

125
00:11:58,810 --> 00:12:02,110
這些是目前最常用的衰落和滑動。

126
00:12:02,110 --> 00:12:06,560
我們打算使用它們替代我們做，我們打算在未來的視頻啟動列表應用程序。