다시 오신 것을 환영합니다.
그래서 내가 처음 Jay queery를 소개했을 때, 그것은 우리가 select 요소가 이벤트 리스너에서 그들을 조작하는 것을 돕는다는 것을 언급했습니다.
그리고 효과와 애니메이션에도 도움이된다고 언급했습니다.
그래서이 비디오에서 저는 효과들에 내장 된 몇몇 것들에 대한 빠른 미리보기를 할 것입니다. 특히, 효과 효과와 슬라이드의 두 가지 범주를 보여줄 것입니다.
그래서 나는 효과 카테고리에서 Jay Corey 부두에있다.
여러분은 효과와 관련된 몇 가지 방법이 있다는 것을 알 수 있습니다. 나는 페이드 효과를 보여줌으로써 시작할 것입니다. 그래서 나는 페이드 아웃을 시작할 것입니다.
어떤 페이드 아웃은 달러 기호 또는 요소 세트로 요소를 선택하고 그 요소를 페이드 아웃이라고 부르면 해당 요소를 전체 불투명도에서 전체 투명도 또는 불투명도로 애니메이션을 적용합니다.
따라서 기본적으로 요소가 사라지고 속도가 느리거나 빠름 또는 느린 경우에는 지속 시간을 제공 할 수 있습니다.
몇 밀리 초를 제공 할 수 있습니다.
기본값은 400 밀리 초입니다. 그러면 콜백을 제공 할 수 있습니다. 콜백은 막 다른 순간에 표시됩니다.
따라서이 효과 연구 데모를 시연하기 위해 여기에 새 파일을 만들겠습니다. 마지막 데모 페이지에서 우리 구조를 복사하고이 파일을 J Querrey 효과라고 부릅니다.
그래서 우리는 그것을 설정하고 여기에있는 모든 내용을 없애고 몇 개의 div를 추가 할 것입니다.
세 개의 div를 만들고 이들 div를 사용하여 페이드 아웃하고 애니메이션을 만들고 위아래로 슬라이드 해 보겠습니다.
그래서 저는이 첫 번째 내용에 몇 가지 내용을 줄 예정입니다. 다음 내용이 사라지지 않을 것입니다.
제발 부탁합니다.
마지막으로 도움이 도움이된다고 말하는 메시지가 표시됩니다.
그래서이 부서들은 사라지지 않을 필사적입니다.
불행히도 오늘은 운이 좋은 날이 아닙니다.
그리고 우리는 그들을 밖으로 싸우게 될 것입니다.
이렇게 더 명확하게하기 위해 저는 우리 삶에 어떤 스타일을 더해서 우리가 볼 수있는 색깔을 갖도록 할 것입니다.
그리고 그것들은 또한 우리가 볼 수있는 너비와 높이를 위아래로 움직입니다.
그래서 모든 div를 선택하고 100 픽셀, 100 픽셀 높이, 청록색 배경을 지정하고 저장하겠습니다. 그러면 이것을 열어 보겠습니다.
우리에게는 세 개의 사업부가 있습니다.
그러나 나는 그들이 같은 선상에 있기를 바란다.
그래서 그 일을하는 한 가지 방법은 떠 다니는 부유물을 이용하는 것입니다.
이제 그들은 모두 같은 선상에 있지만 서로 피가 흘렀습니다.
따라서 우리는 마진을 추가 할 수 있다고 수정했습니다.
그래서 우리는 모든면에서 20 픽셀의 여백을 할 것입니다.
이제 우리는 세 개의 정사각형으로 끝나고 각각 내부에 텍스트가 있고 우리가 할 일은 모두 우리가 그들을 어떻게 들여 놓을 수 있는지 보여주기 때문에 우리는 그들에게 스타일을 적용 할 필요가 없습니다.
그래서 우리는 여기에 버튼을 추가 할 것입니다.이 버튼은 단지 나를 클릭한다고 말할 것입니다.
그리고이 버튼을 클릭하면 애니메이션이 실행됩니다.
그래서 이것을 클릭하면 세 항목이 사라져서 시작됩니다.
그래서 페이드 아웃을 되풀이하는 것은 완전한 불투명도 또는 어떤 불투명도에서 요소를 취할 것입니다. 현재는 투명성이 완전해질 때까지 머물러 있습니다.
따라서이 점 선택 점이 흐려지는 것처럼 보입니다. 속도가 느리거나 빠르거나 문자열을 옵션으로 제공 할 수도 있고, 밀리 초 단위로 지정할 수도 있습니다.
그럼 이제 알려 드리겠습니다.
저는 실제로 별도의 파일에서이 작업을 수행 할 것이므로 자바 스크립트 파일을 만들어 저장하겠습니다.
나는 그것이 단지 내 천부적 재능에 영향을 미쳤다. 내 경보 장치를 연결하고 올바르게 함께 묶었 다.
스크립트 태그를 추가하기 만하면됩니다.
소스는 효과와 같습니다.
예.
새로 고침하면 연결 경보가 울립니다.
그래서 우리가 여기서하고 싶은 것은이 divs를 퇴장시키는 것입니다.
따라서 우리는 그 것처럼 장치를 선택하고 페이드 아웃하지 않아야합니다.
그리고 나서 우리는 속도를 제공하거나 그냥 그대로 둘 수 있습니다.
그리고 그것이 우리가하고 싶거나 새로 고치고 싶은 것이고 페이지가로드 될 때 볼 수 있습니다.
자 이제 버튼을 클릭 할 때 실제로 그렇게하겠습니다.
그래서 우리는 달러 기호 버튼 점을 원할 것입니다. 우리는 클릭을 할 수도 있고, 빨리 점을 찍고 콜백 함수를 전달할 수도 있습니다.
그래서 우리가 클릭 할 때 모든 div가 사라지고 이제는 새로 고침됩니다. 클릭하면 모두 사라집니다.
그래서 제가 언급했듯이 우리는 1000과 같이 1 초를 제공 할 수 있습니다.
새로 고침하면 클릭하면 사라지기까지 전체 초가 걸립니다.
페이드 아웃에 대한 중요한 점은 여기 페이지를 살펴보면 div가 여전히 기숙사에있는 팀에 남아 있다는 것을 알 수 있습니다.
그들의 디스플레이가 none으로 설정 되었기 때문에 우리는 단지 그들을 보지 못합니다.
따라서 페이지를 삭제하거나 페이지에서 삭제하지는 않습니다.
그냥 숨기는거야.
그리고 그것은 분명히 중요한 차이입니다.
따라서 div가 사라져서 메시지를 인쇄하고 싶을 때 로그 아웃을 취소 할 때 페이드 아웃과 같은 작업을 수행합니다.
그리고 이걸 실행하면 콘솔을 열고 일이 일어나는 순서를 지켜 볼 것입니다.
그래서 여기를 클릭하면 페이드가 실제로 끝나기 전에 페이드가 완성됩니다.
여기서 일어나는 일은 모든 div를 선택하고 페이드 아웃을 시작하는 것입니다. 그러나 그것은 전체 초를 필요로합니다.
그리고 자바 스크립트는 두 번째 라인이 끝나기 전에 두 번째 라인이 끝나기를 기다리지 않습니다.
그것은 즉시이 라인으로 이동하여 Faid가 완료된 후 출력하고 Fade Out이 끝납니다.
따라서 페이드 아웃 완료 직후에 코드가 발생하기를 원한다면 여기에서 콜백을 전달할 수 있기를 원합니다.
따라서이 콜백은 완료되면 자동으로 페이드 아웃 내부에서 호출됩니다.
그래서 우리의 지속적인 로그를 옮겨 저장하겠습니다.
그리고 내가 새로 고침하고 지금은 페이드 아웃 완료를 클릭하면 3 개의 페이드 완료 콘솔 점 로그를 얻을 수 있습니다.
영사에 문자열을 인쇄하는 것보다 더 일반적인 시나리오는 실제로 사라질 때 실제로 요소를 제거하는 것입니다.
그래서 나는 그들이 단지 숨겨 졌다고 말했고 그들은 실제로 사라지지 않았다.
그리고 우리가 우리가 할 일을 지우고 싶다면 우리가 쓰레기통을 클릭 할 때 우리가 천천히 페이드 아웃하기를 원하는 항목 옆에 클릭하면 빌드 할 것입니다. 멋진 애니메이션을하십시오.
그런 다음 DOM에서 페이지를 완전히 삭제하십시오.
그래서 우리는 remove라는 메소드를 사용할 필요가 있습니다. 그리고 fadeout이 끝난 후 제거 만하고 싶습니다.
이렇게 보이는 것은 이것만으로도 제거 할 수 있습니다.
그리고 이것은 fadeout이 끝날 때까지 기다리는 것입니다.
그리고 각 div에 대해 Remove 메소드가 실행됩니다.
그래서 새로 고침하고 나를 클릭하십시오.
그들은 페이드 아웃합니다. 그러면 요소로 가면 우리 몸에는 버튼 만 있고 div 태그는 완전히 사라진 것을 볼 수 있습니다.
그리고 그 라인을 주석 처리하고 새로 고침하면 여기서 세 divs를 시작하는 위치를 볼 수 있으며 버튼을 클릭하면 모든 일이 발생합니다.
사라지고 표시가 없음으로 설정됩니다.
그래서 내가 잘못된 곳에서 코드를 집어 넣고 여기에서 Remove 메소드를 실행하면 모든 divs dot이 그처럼 제거됩니다.
실제로 일어날 것은 주문이 보장되지 않는다는 것입니다.
그리고 이것은 완전한 초를 취할 것입니다.
그리고이 코드는 그 초가 끝날 때까지 기다리지 않습니다.
따라서 페이드 아웃이 시작되고 즉시 제거됩니다.
그래서 결국 사라지기 시작하고 사라지는 직후에 사라집니다.
기본적으로 전혀 퇴색하지 않습니다.
그래서 제이 이유 야.
Corey는이 콜백을 제공합니다. 왜냐하면 우리가 무언가를 사라지게하거나 무언가를 아래로 또는 애니메이션을 슬라이드 한 후에 무언가를하고 싶기 때문입니다.
그래서 저의 다음 요점으로 넘어갑니다. 우리가 할 수있는 다른 애니메이션을 보여주고 싶습니다.
그래서 내가 이렇게 처음에 아무 것도 없도록 디스플레이를 설정하면 새로 고침을합니다.
div를 볼 수 없습니다. 왜냐하면 클릭 할 때 페이드 아웃하지 않고 숨겨진 것이므로 페이드 인 할 수 있기 때문에 예상했던 것처럼 작동합니다.
버튼을 클릭하면 잠시 후에 페이드 인합니다. 그런 다음 나중에 코드가 돌아가고 있다는 것을 알았을 때 코드를 실행하려면 코드를 넣고 여기에 콜백을합니다.
좋아, 그렇게 바보 야.
GK는 Faid 토글과 Faid 토글이 동일한 방식으로 작동하는 멋진 페이드 메서드를 제공합니다.
나는 밀리 세컨드 (milliseconds)의 수를 제공하고, 그것이 현재 보여지고 있는지 아닌지에 따라 어떤 것을 퇴색시킬 필요가 있는지 안다.
그래서 내가 새로 고침하고 페이드 토글을 클릭하면 모든 것을 먹여서 시작하고 다시 모두 페이드 아웃하여 다시 시작합니다.
기본적으로 클래스 목록에 클래스를 추가하거나 Jay Querrey와 함께 토글 클래스를 사용하여 페이드 인 또는 페이드 아웃해야하는지 여부를 결정하는 것과 같습니다.
좋아, 그럼 내가 보여주고 싶은 효과의 다음 세트가 사라지는 것은 이러한 슬라이딩 효과입니다.
여기 아래쪽으로 슬라이드가 아래로 움직이며 위로 움직입니다.
따라서 슬라이드부터 시작해 보겠습니다. Faid와 같은 요소에서 불투명도를 애니메이션화하는 대신 현재 보이지 않는 요소를 가져와 요소의 높이를 실제로 애니메이션화합니다.
그래서 어떻게 작동하는지 보여 드리겠습니다.
우리는 이것을 바꿀 것입니다.
페이드 토글 대신 우리는 아래로 내려갈 것입니다.
우리가 새로 고침 할 때 우리 요소는 숨겨져 있기 때문입니다.
따라서 버튼을 클릭 할 때 슬라이드를 실행하면 높이가 애니메이션되고 슬라이드가 위로 움직이는 것을 볼 수 있습니다.
그 반대입니다.
그래서 내가 디스플레이를 없애서 그들이 보여주고 있다면.
이제 버튼을 클릭합니다.
높이가 애니메이션으로 표시되고 위쪽으로 슬라이드 한 다음 끝에 없음을 표시로 설정합니다.
그리고 다른 방법은 슬라이드 토글입니다.이 슬라이드 토글은 할 일을 결정한 곳의 토글 전환과 같습니다.
그래서 나는 그들이 미끄러지 듯 움직이면 지금 아래로 움직이고 위아래로 움직입니다.
슬라이드를 위로 밀어 슬라이드 토글하는 것이 전부입니다.
그들은 유료 아날로그 방식과 같았습니다.
우리가 전달할 수있는 옵션 콜백도 있습니다.
그래서 우리가 1 초의 지속 시간을 준다면 나는 다시 전화를받을 수 있습니다.
그리고 나는 또 다른 죄책감을 할 것입니다. 마지막 슬라이드의 로그가 완료됩니다.
그리고 두 번째 슬라이드가 끝나면 인쇄됩니다.
그래서 나는 상쾌하게한다.
콘솔을 보자. 클릭을 클릭하면 슬라이드가 완료된 후에 만 ​​볼 수있다.
여기서 똑같은 일이 여기에 집중됩니다.
이것은 6으로 바뀔 것입니다.
우리는 거기에 갈.
그러나 더 일반적인 패턴은 일단 우리가 그들을 밖으로 미끄러 졌거나 사라지게하거나, 우리가 한 것은 그걸 제거하는 것입니다.
그래서 여기에서 슬라이드를하는 데는 1 초가 걸리고 페이지에서 제거됩니다.
그리고 요소 탭으로 가면 버튼과 스크립트를 제외하고는 몸이 비어 있습니다.
그래서 그들은 채석장에서 어떤 효과가 어떻게 작용하는지에 대한 좋은 아이디어를 줄 수 있기를 바랍니다.
이것들은 가장 일반적인 페이딩과 슬라이딩입니다.
그리고 우리는 다음 비디오에서 시작하는 목록 응용 프로그램을 수행하는 대신에 그들을 사용할 것입니다.