1
00:00:00,330 --> 00:00:01,500
Witamy spowrotem.

2
00:00:01,500 --> 00:00:08,820
Więc kiedy pierwotnie wprowadziłem Jay queery Wspomniałem, że pomaga nam robić rzeczy takie jak wybieranie elementów manipulować nimi w detektorach zdarzeń.

3
00:00:08,930 --> 00:00:11,990
I wspomniał również, że pomaga z efektów i animacji.

4
00:00:12,180 --> 00:00:22,000
Więc w tym filmie mam zamiar zrobić szybki podgląd niektórych z tych wbudowanych efektów w szczególności mam zamiar pokazać dwie główne kategorie efektów blaknięcie efekty i slajdy.

5
00:00:22,250 --> 00:00:26,220
Więc jestem w dokach Jay Corey tu w kategorii efektów.

6
00:00:26,280 --> 00:00:36,010
Można tam zobaczyć sporo metod, które mają do czynienia z efektami i mam zamiar rozpocząć pokazując efekty zanikania więc mam zamiar przyjrzeć się wyciszeniem, aby rozpocząć.

7
00:00:36,570 --> 00:00:49,470
Co Fadeout robi to wybrać element ze znakiem dolara lub zestaw elementów i wywołać które zanikają na nim i będzie animować tego elementu z pełnej nieprzejrzystości w dół do pełnej przejrzystości lub zerowej kryciem.

8
00:00:49,500 --> 00:00:57,380
Więc w zasadzie zanika element na zewnątrz i można podać czas, jeśli ma to być powolne lub szybkie lub bardzo powoli.

9
00:00:57,510 --> 00:00:59,690
Możesz podać liczbę milisekund.

10
00:00:59,700 --> 00:01:06,630
Wartość domyślna wynosi 400 milisekund, a następnie można dostarczyć oddzwaniania do uruchomienia na końcu której pokażę za chwilę.

11
00:01:06,780 --> 00:01:18,660
Więc mam zamiar zrobić nowy plik o wykazanie tego badania efektu demo, a ja po prostu skopiować naszej struktury z ostatniej stronie demo i ten wywoła skutki J Querrey.

12
00:01:18,960 --> 00:01:27,000
Mamy więc, że w konfiguracji i mam zamiar pozbyć się wszystkich tych treści tutaj, a potem mam zamiar dodać kilka DIV.

13
00:01:27,120 --> 00:01:34,340
Zróbmy trzy DIV i będziemy korzystać z tych div i blaknięcie je i ożywić je i przesuń je w górę iw dół.

14
00:01:34,450 --> 00:01:45,470
I tak mam zamiar dać im jakąś zawartość wewnątrz tego pierwszego będą one nie znikają mi następnego.

15
00:01:45,900 --> 00:01:48,300
Błagam cię proszę.

16
00:01:48,660 --> 00:01:52,380
I wtedy wreszcie będziemy mieć jeden, który mówi Pomoc Pomoc.

17
00:01:52,720 --> 00:01:55,790
Więc te DIV są zdesperowani, aby nie być zanikała.

18
00:01:56,040 --> 00:01:58,210
Niestety dziś nie ich szczęśliwy dzień.

19
00:01:58,410 --> 00:02:00,230
I będziemy walczyć je.

20
00:02:00,240 --> 00:02:06,720
Więc lepiej o tym mam zamiar dodać w pewnym stylu, żeby nasze życie tak, że mają kolor, który możemy zobaczyć znikną.

21
00:02:07,110 --> 00:02:10,900
I mają też szerokość i wysokość, które możemy zobaczyć w górę iw dół.

22
00:02:10,950 --> 00:02:28,150
Więc mam zamiar wybrać wszystkie DIV i dać im z 100 pikseli i wysokości 100 pikseli i kolor tła turkusowy i niech zapisać, a my tego otworzyć.

23
00:02:28,860 --> 00:02:30,420
Mamy trzy DIV.

24
00:02:30,420 --> 00:02:32,570
Chciałbym jednak je lubię być na tej samej linii.

25
00:02:32,880 --> 00:02:36,900
Tak więc jednym ze sposobów na to jest z lewej pływaka.

26
00:02:37,020 --> 00:02:39,880
Teraz wszyscy są w tej samej linii, ale zlewają się ze sobą.

27
00:02:40,200 --> 00:02:43,020
Więc to naprawić, że możemy dodać margines.

28
00:02:43,020 --> 00:02:46,850
Więc po prostu zrobić margines 20 pikseli z każdej strony.

29
00:02:46,860 --> 00:02:56,740
Teraz kończy się z trzech kwadratów, a każdy z nich ma jakiś tekst w środku i naprawdę nie trzeba przesadzać stylizacji je ponieważ wszyscy mamy zamiar zrobić, to wykazać, w jaki sposób możemy dopasować je i obecnie.

30
00:02:57,060 --> 00:03:03,060
Więc mamy zamiar dodać przycisk do góry tutaj i ten przycisk będzie po prostu powiedzieć, kliknij mnie.

31
00:03:03,270 --> 00:03:08,000
A kiedy kliknij ten przycisk, co się stanie, jest to, że nasze animacje będą działać.

32
00:03:08,220 --> 00:03:12,760
Więc kliknij to i te trzy elementy powinny zanikanie zacząć.

33
00:03:13,320 --> 00:03:22,500
Więc powtórzyć zanikanie odbędzie element z pełnym kryciem lub jakiegokolwiek krycie To obecnie i wyblakłe do momentu pełnej przejrzystości.

34
00:03:22,500 --> 00:03:33,370
Tak wygląda to wybierz dot wyciszenia i możemy zapewnić opcjonalny ciąg prędkości tak wolno czy szybko, czy możemy dać mu kilka milisekund.

35
00:03:33,390 --> 00:03:34,490
Więc pozwól mi pokazać, że teraz.

36
00:03:34,740 --> 00:03:39,870
Jestem rzeczywiście zamiar zrobić to w oddzielnym pliku, więc zamierzam zrobić plik JavaScript i oszczędzać.

37
00:03:40,250 --> 00:03:52,470
Zadzwonię wpływa po prostu geniuszem zapisać sejf, który miał mój alert podłączone i połączone ze sobą właściwie to dno.

38
00:03:52,470 --> 00:03:54,020
Wystarczy dodać tag skryptu.

39
00:03:54,480 --> 00:03:56,450
Źródło równa efekty.

40
00:03:56,560 --> 00:03:57,320
Tak.

41
00:03:57,690 --> 00:04:01,030
A jeśli mamy odświeżyć naszą podłączony alarm.

42
00:04:01,350 --> 00:04:04,380
Więc to, co chcemy zrobić tutaj jest Faid te DIV zewnątrz.

43
00:04:04,380 --> 00:04:10,040
Więc musimy wybrać urządzenie tak po prostu i nie zanikają.

44
00:04:10,380 --> 00:04:13,290
A potem możemy zapewnić prędkość lub po prostu zostawić go w taki sposób.

45
00:04:13,290 --> 00:04:20,630
A jeśli to wszystko chcemy zrobić lub odświeżyć i można zobaczyć, jak załadowaniu strony zaczną zanikać w górę.

46
00:04:20,640 --> 00:04:23,740
Więc rzeczywiście sprawi, że stanie, gdy klikamy przycisk.

47
00:04:24,090 --> 00:04:38,480
Więc będziemy chcieli zrobić przycisk znak dolara kropkę i możemy albo nie kliknąć lub zrobię kropkę na szybkie, a następnie przekazać do naszej funkcji zwrotnej.

48
00:04:38,640 --> 00:04:50,870
Więc kiedy klikamy wtedy znikną wszystkie div ot tak, a teraz zostanie odświeżona i jeśli kliknę widać wszystkie one zanikają.

49
00:04:50,980 --> 00:04:56,060
Tak jak już wspomniałem możemy podać numer tutaj coś jak 1000, które jest pełne sekundy.

50
00:04:56,260 --> 00:05:02,370
A gdybym odświeżyć zobaczysz po kliknięciu trwa pełną sekundę dla nich zanikają.

51
00:05:02,620 --> 00:05:12,400
Ważnym punktem jest to, że o fadeout gdybym sprawdzić stronę tutaj i patrzę na elementach DIV są nadal w zespole albo jeszcze w akademiku.

52
00:05:12,430 --> 00:05:15,760
Po prostu nie widzę ich, bo ich wyświetlanie zostało ustawione na none.

53
00:05:15,760 --> 00:05:18,730
Więc ich nie usuwać ani nie usuwa je ze strony.

54
00:05:18,910 --> 00:05:20,010
To jest po prostu je ukrywa.

55
00:05:20,170 --> 00:05:22,890
I to jest na pewno ważnym wyróżnieniem.

56
00:05:22,990 --> 00:05:35,150
Więc powiedzmy, że chciałem po prostu wydrukować wiadomość po div znikła się więc chciałbym zanikać je i zrób coś takiego wyciszenia zakończona gdyż zaprzepaszczone dziennik.

57
00:05:35,680 --> 00:05:39,590
A jeśli biegnę to będę otworzyć konsolę i obserwować kolejność rzeczy.

58
00:05:39,730 --> 00:05:45,800
Więc kiedy kliknij tutaj mam Faid zakończone drogę przed blaknięcie jest faktycznie wykonywana.

59
00:05:46,090 --> 00:05:51,730
Więc co się dzieje, jest to, że możemy zaznaczyć cały div i rozpoczynamy zanikanie ale ma pełną sekundę.

60
00:05:52,060 --> 00:05:56,280
I JavaScript nie czeka na ten drugi, aby zakończyć zanim przechodzi do następnej linii.

61
00:05:56,350 --> 00:06:02,310
Natychmiast ruszyliśmy na tej linii i drukuje Faid zakończone a potem zanikają wykończenia.

62
00:06:02,470 --> 00:06:11,390
Więc jeśli chcemy Kod wydarzyć tuż po wyciszeniem wykończenia chcemy być gwarancją po możemy przekazać w zwrotnego tutaj.

63
00:06:11,440 --> 00:06:16,860
A więc ta funkcja zwrotna zostanie wywołana wewnątrz wyciszenia się automatycznie, kiedy to zrobić.

64
00:06:17,020 --> 00:06:20,830
Więc mam zamiar przenieść naszą stałą dziennik tam i oszczędzać.

65
00:06:21,300 --> 00:06:31,650
A gdybym odświeżyć i teraz kliknij zanikanie wykończeń, a potem dostać 3 Fade zakończone dzienniki konsoli kropki dla każdego z nich.

66
00:06:31,690 --> 00:06:39,220
Bardziej typowy scenariusz, a nie tylko drukowanie ciąg w Konsul jest rzeczywiście usunąć elementy raz my ich zanikać.

67
00:06:39,220 --> 00:06:42,580
Więc mówiłem, że są one po prostu nie są one ukryte w rzeczywistości nie ma.

68
00:06:42,660 --> 00:06:51,940
A jeśli chcemy usunąć je jak na naszej liście do zrobienia mamy zamiar budować, gdy klikniemy na kosza obok elementu, który chcemy go zanikać powoli zrobić miłą animacji.

69
00:06:52,060 --> 00:06:55,620
Ale wtedy też po prostu usunąć poza stronę całkowicie wyłączyć DOM.

70
00:06:55,810 --> 00:07:03,180
Więc musimy użyć metody nazywane usuń, a chcemy tylko, aby ją usunąć po zakończeniu wyciszenia.

71
00:07:03,340 --> 00:07:09,460
Tak, że wygląda jak to będzie po prostu zrobić to usunięcie.

72
00:07:10,010 --> 00:07:13,930
A co to będzie zrobić, to czekać aż do wyciszenia jest zakończona.

73
00:07:13,990 --> 00:07:17,050
I dla każdego div będzie działać metody Remove na nim.

74
00:07:17,050 --> 00:07:20,430
Więc odświeżyć i kliknij kliknij mnie.

75
00:07:21,100 --> 00:07:29,850
Oni znikną, a następnie, jeśli podejdziemy do elementów można zobaczyć, że nasz organizm ma tylko przycisk teraz i tag wszystkie div są całkowicie zniknęły.

76
00:07:30,100 --> 00:07:39,130
A gdybym skomentować tę linię i odśwież można zobaczyć, gdzie zaczną tu trzy div i kliknij na przycisk i wszystko, co się dzieje.

77
00:07:39,160 --> 00:07:42,910
Oni znikną, a następnie wyświetlacz jest ustawiony na none.

78
00:07:42,910 --> 00:07:52,850
Więc jeśli mogę umieścić mój kod w niewłaściwym miejscu i pobiegłem metody Remove tu zrobiłem wszystkie DIV dot usunąć tak po prostu.

79
00:07:52,900 --> 00:07:57,080
Co właściwie stało się, że kolejność nie jest gwarantowana.

80
00:07:57,280 --> 00:07:59,210
I to ma zamiar wziąć pełną sekundę.

81
00:07:59,410 --> 00:08:01,800
A ten kod nie będzie czekać na ten drugi, aby zakończyć.

82
00:08:01,930 --> 00:08:06,410
Tak rozpocznie się zanikanie, a następnie uruchomić usunąć natychmiast po.

83
00:08:06,610 --> 00:08:13,490
Tak, że kończy się patrząc jak ta, gdzie zaczyna zanikać i po prostu natychmiast po usuwa je.

84
00:08:13,780 --> 00:08:16,450
Więc jest to w zasadzie nie znikną w ogóle.

85
00:08:16,480 --> 00:08:17,110
Więc dlatego J.

86
00:08:17,110 --> 00:08:26,810
Corey zapewnia to zwrotnego, ponieważ jest to dość powszechne dla nas chcesz zrobić coś po tym zanikać coś lub po tym, przesuń w dół lub coś, co jest animacja.

87
00:08:26,830 --> 00:08:33,790
Tak, że prowadzi mnie do kolejnego punktu, który jest, że chcę, aby pokazać niektóre z innych animacji, które możemy zrobić, więc możemy również znikną rzeczy.

88
00:08:34,030 --> 00:08:40,920
Więc jeśli mogę ustawić wyświetlanie się żadna na początku jak to i odświeżyć.

89
00:08:41,020 --> 00:08:49,840
Nie widzimy DIV bo teraz są one ukryte zamiast blaknięcie je, gdy klikniemy możemy zanikać je i działa tak, jak można by oczekiwać.

90
00:08:49,840 --> 00:09:00,350
Kliknij na przycisk i znikną w ciągu sekundy, a następnie, jeśli chcemy uruchomić jakiś kod po tym, gdy wiemy, że skończysz blaknięcie możemy umieścić jakiś kod i powiedział, że jeśli wywołanie zwrotne tutaj.

91
00:09:00,970 --> 00:09:02,310
Dobrze więc to Faden.

92
00:09:02,350 --> 00:09:10,400
GK zapewnia jeszcze jeden miły sposób na blaknięcie, które nazywa Faid Faid przełącznika, przełącznik działa w ten sam sposób.

93
00:09:10,660 --> 00:09:18,080
I zapewnić liczbę milisekund i będzie wiedzieć, czy to coś musi zanikać lub oddalać zależności od tego czy jest to obecnie wyświetlane, czy nie.

94
00:09:18,310 --> 00:09:27,020
Więc jeśli odświeżyć i klikam na Fade przełącznik zaczyna karmiąc je wszystkie, a następnie zanik ich wszystkich iz powrotem.

95
00:09:27,040 --> 00:09:35,860
Jest to w zasadzie jak dodawanie klasy do listy klas lub przy użyciu klasy przełączania z Jay Querrey, gdzie to właśnie decyduje, czy potrzebuje zanikać lub zanikają.

96
00:09:35,860 --> 00:09:44,260
Dobrze więc, że jest blaknięcie następny zestaw efektów, które chcę wykazać, są one przesuwane efekty.

97
00:09:44,320 --> 00:09:49,170
Więc tutaj mamy zjechać przełączania slajdów i przesuń w górę.

98
00:09:49,240 --> 00:10:01,060
Więc zacznę zjechać w dół i co robi jest potrzebny element, który nie jest aktualnie pokazując zamiast animacji krycie na elemencie jak Faid to właściwie animuje wysokość elementu.

99
00:10:01,090 --> 00:10:03,030
Więc pokażę ci, jak to działa.

100
00:10:03,130 --> 00:10:04,300
Jesteśmy ma zamiar to zmienić.

101
00:10:04,300 --> 00:10:07,870
Zamiast zanikać przełącznik musimy po prostu przesuń w dół.

102
00:10:08,650 --> 00:10:11,810
A to dlatego, że kiedy odświeżyć nasze elementy są ukryte.

103
00:10:11,920 --> 00:10:21,270
Więc jeśli uruchomię przesuń w dół, gdy klikniemy na przycisku zobaczysz, że wysokość jest animowana w dół i to samo tyczy się przesuwać się w górę.

104
00:10:21,400 --> 00:10:22,420
To nie odwrotnie.

105
00:10:22,480 --> 00:10:26,360
Więc jeśli mogę pozbyć się na wyświetlaczu, dzięki czemu są one wyświetlane.

106
00:10:26,710 --> 00:10:28,630
A teraz kliknij na przycisku.

107
00:10:28,630 --> 00:10:33,590
Ich wysokość jest animowana i przesuwać do góry i następnie wyświetlanie wartości Brak na końcu.

108
00:10:33,910 --> 00:10:41,540
A druga metoda jest przełącznik suwakowy, który działa podobnie jak Faid przełączania, gdzie decyduje, co robić.

109
00:10:41,650 --> 00:10:48,090
Więc jeśli kliknę ślizgają się i teraz zjechać w dół iz powrotem w górę iw dół.

110
00:10:48,370 --> 00:10:51,740
Więc to wszystko jest do góry przesuń suwak w dół i przesuń przełącznik.

111
00:10:51,760 --> 00:10:54,320
Byli tak samo jak oni Faid metod analogowych.

112
00:10:54,610 --> 00:10:57,580
Istnieje również opcjonalna funkcja zwrotna, że ​​możemy przekazać w.

113
00:10:57,790 --> 00:11:04,250
Jeśli więc dać czas jak 1 sekundę, a następnie mogę dostać wezwanie widok.

114
00:11:04,600 --> 00:11:09,380
A ja po prostu zrobić kolejny con. że log na szkiełku końcowego odbywa.

115
00:11:09,730 --> 00:11:15,250
I że drukuje tylko po pełnym zakończeniu druga slide.

116
00:11:15,250 --> 00:11:16,130
Więc odświeżyć.

117
00:11:16,270 --> 00:11:25,630
Spójrzmy na konsoli i kliknij kliknij mnie i można zobaczyć tylko raz wydrukowane suwak zostało zrobione.

118
00:11:25,630 --> 00:11:28,380
To samo tutaj zwrócić uwagę tutaj.

119
00:11:28,390 --> 00:11:31,330
Spowoduje to zmianę do sześciu.

120
00:11:31,330 --> 00:11:32,630
No to jedziemy.

121
00:11:33,290 --> 00:11:43,670
Ale znowu bardziej powszechne wzór jest usunięcie elementów kiedy już slided ich lub zanikać je lub cokolwiek zrobiliśmy to, aby je usunąć.

122
00:11:43,690 --> 00:11:48,400
Więc to zajmie chwilę, aby je przesunąć, a następnie są one usunięte ze strony.

123
00:11:48,460 --> 00:11:53,970
A jeśli idziemy do zakładki elementów naszego ciała jest pusta, z wyjątkiem tego przycisku i skryptu.

124
00:11:54,580 --> 00:11:58,810
Więc mam nadzieję, że daje dobry pomysł, jak niektóre z efektów pracy w kamieniołomie.

125
00:11:58,810 --> 00:12:02,110
Są to zdecydowanie najczęściej blaknięciem oraz przesuwne.

126
00:12:02,110 --> 00:12:06,560
I będziemy ich używać zamiast naszego zrobić listę aplikacji, które mamy zamiar rozpocząć w następnym filmie.