1
00:00:00,330 --> 00:00:01,500
다시 오신 것을 환영합니다.

2
00:00:01,500 --> 00:00:08,820
그래서 내가 처음 Jay queery를 소개했을 때, 그것은 우리가 select 요소가 이벤트 리스너에서 그들을 조작하는 것을 돕는다는 것을 언급했습니다.

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
그래서 나는 효과 카테고리에서 Jay Corey 부두에있다.

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
따라서이 효과 연구 데모를 시연하기 위해 여기에 새 파일을 만들겠습니다. 마지막 데모 페이지에서 우리 구조를 복사하고이 파일을 J Querrey 효과라고 부릅니다.

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
그래서이 부서들은 사라지지 않을 필사적입니다.

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
우리에게는 세 개의 사업부가 있습니다.

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
저는 실제로 별도의 파일에서이 작업을 수행 할 것이므로 자바 스크립트 파일을 만들어 저장하겠습니다.

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
그래서 우리가 여기서하고 싶은 것은이 divs를 퇴장시키는 것입니다.

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과 같이 1 초를 제공 할 수 있습니다.

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
그래서 여기를 클릭하면 페이드가 실제로 끝나기 전에 페이드가 완성됩니다.

59
00:05:46,090 --> 00:05:51,730
여기서 일어나는 일은 모든 div를 선택하고 페이드 아웃을 시작하는 것입니다. 그러나 그것은 전체 초를 필요로합니다.

60
00:05:52,060 --> 00:05:56,280
그리고 자바 스크립트는 두 번째 라인이 끝나기 전에 두 번째 라인이 끝나기를 기다리지 않습니다.

61
00:05:56,350 --> 00:06:02,310
그것은 즉시이 라인으로 이동하여 Faid가 완료된 후 출력하고 Fade Out이 끝납니다.

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
그래서 우리는 remove라는 메소드를 사용할 필요가 있습니다. 그리고 fadeout이 끝난 후 제거 만하고 싶습니다.

71
00:07:03,340 --> 00:07:09,460
이렇게 보이는 것은 이것만으로도 제거 할 수 있습니다.

72
00:07:10,010 --> 00:07:13,930
그리고 이것은 fadeout이 끝날 때까지 기다리는 것입니다.

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
그리고 그 라인을 주석 처리하고 새로 고침하면 여기서 세 divs를 시작하는 위치를 볼 수 있으며 버튼을 클릭하면 모든 일이 발생합니다.

77
00:07:39,160 --> 00:07:42,910
사라지고 표시가 없음으로 설정됩니다.

78
00:07:42,910 --> 00:07:52,850
그래서 내가 잘못된 곳에서 코드를 집어 넣고 여기에서 Remove 메소드를 실행하면 모든 divs dot이 그처럼 제거됩니다.

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
그래서 제이 이유 야.

86
00:08:17,110 --> 00:08:26,810
Corey는이 콜백을 제공합니다. 왜냐하면 우리가 무언가를 사라지게하거나 무언가를 아래로 또는 애니메이션을 슬라이드 한 후에 무언가를하고 싶기 때문입니다.

87
00:08:26,830 --> 00:08:33,790
그래서 저의 다음 요점으로 넘어갑니다. 우리가 할 수있는 다른 애니메이션을 보여주고 싶습니다.

88
00:08:34,030 --> 00:08:40,920
그래서 내가 이렇게 처음에 아무 것도 없도록 디스플레이를 설정하면 새로 고침을합니다.

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
좋아, 그렇게 바보 야.

92
00:09:02,350 --> 00:09:10,400
GK는 Faid 토글과 Faid 토글이 동일한 방식으로 작동하는 멋진 페이드 메서드를 제공합니다.

93
00:09:10,660 --> 00:09:18,080
나는 밀리 세컨드 (milliseconds)의 수를 제공하고, 그것이 현재 보여지고 있는지 아닌지에 따라 어떤 것을 퇴색시킬 필요가 있는지 안다.

94
00:09:18,310 --> 00:09:27,020
그래서 내가 새로 고침하고 페이드 토글을 클릭하면 모든 것을 먹여서 시작하고 다시 모두 페이드 아웃하여 다시 시작합니다.

95
00:09:27,040 --> 00:09:35,860
기본적으로 클래스 목록에 클래스를 추가하거나 Jay Querrey와 함께 토글 클래스를 사용하여 페이드 인 또는 페이드 아웃해야하는지 여부를 결정하는 것과 같습니다.

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
그리고 다른 방법은 슬라이드 토글입니다.이 슬라이드 토글은 할 일을 결정한 곳의 토글 전환과 같습니다.

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
그들은 유료 아날로그 방식과 같았습니다.

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
이것은 6으로 바뀔 것입니다.

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
그래서 여기에서 슬라이드를하는 데는 1 초가 걸리고 페이지에서 제거됩니다.

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
그리고 우리는 다음 비디오에서 시작하는 목록 응용 프로그램을 수행하는 대신에 그들을 사용할 것입니다.