하나. 보여주십시오
jQuery의 디스플레이 메소드는 다음과 같습니다. .Show () 및 숨겨진 방법은 다음과 같습니다. .Hide (). 매개 변수가 없으면 내용을 표시하고 숨기기가 어렵습니다.
$ ( '. show'). click (function () {// 트리거 이벤트 설정 $ ( '#box'). show (); // show}); $ ( '. hide'). click (function () {// 트리거 이벤트 설정 $ ( '#box'). hide (); // hide});.show () 및 .hide () 메소드에서, 매개 변수를 전달할 수 있으며, 이는 밀리 초 단위의 속도를 제어합니다 (1000 밀리 초의 1 초). 또한 투명성 변화뿐만 아니라 증가하고 감소하기위한 일정한 속도가 풍부합니다.
$ ( '. show'). 클릭 (function () {$ ( '#box'). show (1000); // 1 초가 걸렸습니다}); $ ( '. hide'). click (function () {$ ( '#box'). hide (1000); // 1 초가 걸렸습니다});JQuery는 제어 속도에 직접 밀리 초를 사용하는 것 외에도 3 개의 사전 설정 속도 매개 변수 문자열을 제공합니다 : 느리고, 정상 및 빠른, 각각 600 밀리 초, 400 밀리 초 및 200 밀리 초에 해당합니다.
$ ( '#box'). show ( 'slow'); // 600 밀리 초 $ ( '#box'). show ( 'normal'); // 400 밀리 초 $ ( '#box'). show ( 'fast'); // 200 밀리 초
참고 : 실수로 오류를 전달하거나 빈 문자열을 전달하는 경우 밀리 초 전달 또는 사전 설정 문자열을 통과하는지 여부. 그러면 기본값은 400 밀리 초입니다.
.show () 및 .hide ()의 콜백 함수를 사용하여 대기열 애니메이션 효과를 달성하십시오.
(1) 함수 이름을 사용하여 자신에게 전화하십시오
$ ( '. show'). click (function () {$ ( '#box'). show ( 'slow', function showspan () {$ (this) .next (). show ( 'slow', showspan);});(2) arguments.callee를 사용하여 익명 함수를 호출하십시오
$ ( '. show'). click (function () {$ ( '#box'). show ( 'slow', function () {$ (this) .next (). show ( 'slow', arguments.callee);})..show () 및 .hide ()를 사용하면 전환 할 버튼이 필요한 경우 조건부 판단을해야합니다. jQuery는 비슷한 기능을 가진 별도의 방법을 제공합니다. .Toggle ().
$ ( '. 토글'). 클릭 (function () {$ (this) .toggle ( 'slow');});둘. 슬라이드 및 스크롤 jQuery는 요소의 높이를 변경하는 메소드 세트를 제공합니다. 이름에서 알 수 있듯이 위쪽으로 줄어들고 (스크롤) 아래쪽으로 확장됩니다 (슬라이드).
$ ( '. down'). click (function () {// 아래로 스 와이프하여 $ ( '#box'). slidedown ();}); $ ( '. up'). click (function () {// swipe up $ ( '#box'). slideup ();}); $ ( '. Togggle'). click (function () {swlest $ ( '###));참고 : 슬라이딩 및 스크롤 효과는 디스플레이 및 숨겨진 효과와 동일하며 동일한 매개 변수를 갖습니다.
삼. 사라지고 사라지는
JQuery는 투명성 변경을위한 일련의 방법을 제공합니다. .fadein () 및 .fadeout ()는 각각 페이드 및 페이드를 나타냅니다. 물론 자동 전환 방법이 있습니다 : .fadetoggle ().
$ ( '. in'). click (function () {// $ ( '#box'). fadein ( 'slow');}); $ ( '. out'). click (function () {// fake out $ ( '#box'); fadeout ( 'slow'); $ ( '. toggle'). });위의 세 가지 투명성 방법은 0에서 100 또는 100에서 0까지만 가능합니다. 지정된 값을 설정하려면 방법이 없습니다. JQuery는이 문제를 해결하기 위해 .fadeto () 메소드를 제공합니다.
$ ( '. 토글'). 클릭 (function () {$ ( '#box'). fadeto ( 'slow', 0.33); //0.33은 값이 33%}임을 의미합니다);추신 : 값 수는 0에서 1이며 백분율에 해당합니다.
네. 맞춤 애니메이션
JQuery는 우리가 사용하는 단순하고 일반적으로 사용되는 고정 애니메이션 측면을 제공합니다. 그러나 때로는이 간단한 애니메이션이 우리의 복잡한 요구를 충족시킬 수 없습니다. 현재 jQuery는 .animate () 메소드를 제공하여보다 복잡하고 변경 가능한 요구 사항을 충족하기 위해 사용자 정의 애니메이션을 작성합니다.
$ ( '. animate'). 클릭 (function () {$ ( '#box'). 애니메이션 ({ 'width': '300px', 'fontsize': '50px', '불투명도': 0.5});});참고 : CSS 변경은 애니메이션 효과입니다. 위의 예에서는 이미 네 가지 CSS 변경이 있으며 여러 애니메이션의 동기 모션 효과가 달성되었습니다.
전달 해야하는 매개 변수는 하나 뿐이며 키 값 쌍 CSS 스타일이있는 객체입니다. 두 가지 옵션 매개 변수, 즉 속도 및 콜백 기능이 있습니다.
$ ( '. animate'). click (function () {$ ( '#box'). animate ({ 'width': '500px', 'height': '400px',}, 2000, function () {alert ( 'execution 완수');});지금까지 우리는 고정 된 위치를 가진 애니메이션을 만들었습니다. 모션 상태에서 비트 움직임 사진을 구현하려면 사용자 정의 애니메이션을 사용하여 CSS의 절대 포지셔닝 기능과 결합해야합니다.
$ ( '. animate'). click (function () {$ ( '#box'). animate ({ 'top': '300px', // css의 절대 위치는 먼저 '왼쪽': '200px'});});추신 : 참조 객체는 CSS에서 먼저 설정해야하며 절대 위치를 설정해야합니다.
사용자 정의 애니메이션에서 각 시작 모션은 초기 위치 또는 초기 상태에 있어야하며 때로는 현재 위치 또는 상태를 통해 애니메이션을 원합니다. JQuery는 사용자 정의 애니메이션을 추가하고 줄이는 기능을 제공합니다.
$ ( '. animate'). 클릭 (function () {$ ( '#box'). 애니메이션 ({{왼쪽 : '+= 100px', 너비 : '+= 100px', 높이 : '+= 100px'});});다섯. 대기열 애니메이션 방법
우리는 이미 전에 큐 애니메이션을 구현할 수 있습니다. 동일한 요소 인 경우 순서대로 호출되거나 연결 될 수 있습니다. 요소가 다른 경우 콜백 함수를 사용할 수 있습니다. 그러나 때로는 대기열 애니메이션이 너무 많으며 콜백 기능의 가독성이 크게 줄어 듭니다. 이를 위해 JQuery는 대기열 애니메이션에 특별히 사용되는 일련의 방법을 제공합니다.
// 순서 대기열에서 연결을 구현할 수 없습니다
$ ( '##box'). slideup ( 'slow'). 슬라이드 타운 ( 'slow'). css ( 'background', 'orange');
참고 : 애니메이션 메소드가 애니메이션 인 경우, 인조는 순서대로 대기열 될 수 있으며 .css () 메소드는 애니메이션 메소드가 아니며 대기열이 처음 통과되기 전에 발생합니다. 그런 다음 애니메이션 메소드 콜백 함수를 사용하여 문제를 해결할 수 있습니다.
// 콜백 함수를 사용하여 $ ( '#box'). slidgeup ( 'slow'). slididown ( 'slow', function ({$ (this) .css ( 'background', 'Orange'));그러나이 경우 대기열 애니메이션이 많을 때 가독성이 줄어들뿐만 아니라 원래 애니메이션 방법이 충분히 명확하지 않습니다. 따라서 우리의 아이디어는 각 작업이 고유 한 독립적 인 방법이라는 것입니다. 그런 다음 jQuery는 콜백 함수와 유사한 메소드를 제공합니다. .queue ().
// 애니메이션 메소드 $ ( '#box'). slideUp ( 'slow'). 슬라이드 타운 ( 'slow').
이제 우리는 .queue () 메소드에 숨겨진 애니메이션을 계속 추가하고 싶지만이를 구현할 수 없다는 것을 알았습니다. 이것은 .queue () 기능으로 인해 발생합니다. 솔루션 : jQuery의 .queue ()의 콜백 함수는 다음 함수 인 매개 변수를 전달할 수 있습니다. 큐 애니메이션을 실행하려면 끝에 다음 () 메소드를 호출하십시오.
// 다음 매개 변수를 사용하여 연속 통화 대기열 애니메이션을 구현합니다.
PS : .queue () 메소드는 또 다른 함수가 있습니다.이 기능은 현재 애니메이션 큐의 길이를 얻는 것입니다 (자세히 설명되지 않음).
JQuery는 또한 큐를 정리하는 기능적 방법을 제공합니다. .Clearqueue (). 대기열 콜백 함수 또는 .queue () 메소드에 넣으면 실행 된 나머지 대기열을 제거 할 수 있습니다.
// 애니메이션 큐 $ ( '#box'). 슬라이드 타운 ( 'slow', function () {$ (this) .clearqueue ()}); 육. 애니메이션 관련 방법
여러 번 애니메이션 실행을 중단해야하며 jQuery는 이에 대한 .stop () 메소드를 제공합니다. 두 가지 선택적 매개 변수가 있습니다. .Stop (Clearqueue, Gotoend); Clearqueue는 부울 값을 전달합니다.이 값은 실행되지 않은 애니메이션 큐를 지울지 여부를 나타내며 Gotoend는 실행 애니메이션을 마지막 상태로 직접 점프 할 것인지 여부를 나타냅니다.
$ ( '. animate'). click (function () {$ ( '#box'). 애니메이션 ({ '왼쪽': '300px'}, 1000); $ ( '##box'). 애니메이션 ( 'top': '300px'}, 1000); Animate ( ''width ':'300px '}, 1000); $ ( '#box'). 애니메이션 ({ 'height': '300px'}, 1000); 애니메이션 ({ 'height': '300px'}, 1000); $ ( '. stop'). click (function () {$ ( '#box'). stop (true, false);});// 참고 : 첫 번째 매개 변수는 대기열 애니메이션을 취소할지 여부를 나타냅니다. 기본값은 False입니다. 매개 변수가 true 인 경우 큐 애니메이션이 있으면 후속 큐 애니메이션이 취소됩니다. 두 번째 매개 변수는 현재 애니메이션의 끝에 도달하는지 여부를 나타내고 기본값은 False인지를 나타냅니다. 매개 변수가 참이면 중지 직후에 끝에 도달합니다. 당신은 그것을 직접 복사하고 경험할 수 있습니다.
때로는 애니메이션이나 대기열 애니메이션을 실행할 때 동작 전에 지연이 발생하며 jQuery는 이에 대한 .delay () 메소드를 제공합니다. 이 방법은 애니메이션 전에 지연을 설정하거나 대기열 애니메이션 중간에 추가 할 수 있습니다.
// 시작 지연은 1 초입니다. 중간 지연은 1 초입니다. $ ( '. animate'). 클릭 (function () {$ ( '#box'). 지연 (1000) .animate ({ '왼쪽': '300px'}, 1000); $ ( '##box'). 애니메이션 ( 'ultip': '300px'}, 1000); '너비': '300px'}, 1000);arguments.callee는 그 함수를 나타내는 함수에서 실행됩니다. 일반적으로 익명 함수에 사용됩니다. 익명의 기능에서는 때때로 자신을 부를 필요가 있지만 익명 기능이기 때문에 이름이없고 조정할 수 있습니다. 현재, arguments.callee는 익명 함수 대신 사용할 수 있습니다.
// 자체를 재귀 적으로 실행하고, 무한 루프가 $ ( '#box'). slidEtoggle ( 'slow', function () {$ (this) .slideToggle ( 'slow', arguments.callee);});$ .fx.off 속성은 모든 애니메이션 효과를 끌 수 있습니다.
$ .fx.off = true; // 기본값은 false입니다
모두 이해됩니다.
위는 편집자가 귀하에게 소개 한 JQuery Animation Effect 코드 공유입니다. 나는 그것이 당신에게 도움이되기를 바랍니다.