코드랩 레퍼런스

Definition .scroll() 메서드는 웹 브라우저 스크롤의 변화가 있을 때 이벤트가 발생합니다. Syntax $("selector").scroll() Compatibility 6 7 8 9 10 11 .scroll() Share

Definition .resize() 메서드는 웹 브라우저 사이즈의 변화가 있을 때 이벤트가 발생합니다. Syntax $("selector").resize() Compatibility 6 7 8 9 10 11 .resize() Share

Definition .slideUp() 메서드는 선택한 요소를 슬라이딩으로 숨깁니다. Syntax $("selector").slideUp() Compatibility 6 7 8 9 10 11 .slideUp() Sample1 클릭하면 이미지가 없어지는 예제입니다. 효과(Effect) 1 2 3 $(".one1 img").hide(); $(".one2 img").fadeOut(); $(".one3 img").slideUp(); $(".list img").show(); 효과(Effect) 1 2 3 $(".one1 img").hide(); $(".one2 img").fadeOut(); $(".one3 img").slideUp(); $(".list img").show(); Sample2 클릭하면 이미지가 없어..

Definition .slideToggle() 메서드는 숨김/노출을 슬라이딩으로 합니다. Syntax $("selector").slideToggle() Compatibility 6 7 8 9 10 11 .slideToggle() Share

Definition .slideDown() 메서드는 선택한 요소를 슬라이딩으로 보여줍니다. Syntax $("selector").slideDown() Compatibility 6 7 8 9 10 11 .slideDown() Sample1 클릭하면 이미지가 나타나는 예제입니다. 효과(Effect) 1 2 3 4 $(".one1").show(); $(".one2").fadeIn(); $(".one3").slideDown(); $(".list li").hide(); 효과(Effect) 1 2 3 4 $(".one1").show(); $(".one2").fadeIn(); $(".one3").slideDown(); $(".list li").hide(); Sample2 클릭하면 이미지가 속도에 따라 나타나는 예제입..

Definition .fadeToggle() 메서드는 숨김/노출을 천천히 합니다. Syntax $("selector").fadeToggle() Compatibility 6 7 8 9 10 11 .fadeToggle() Share

Definition .fadeTo() 메서드는 선택한 요소 투명도를 조절합니다. Syntax $("selector").fadeTo() Compatibility 6 7 8 9 10 11 .fadeTo() Sample1 클릭하면 이미지가 나타나는 예제입니다. 효과(Effect) 1 2 3 4 5 $(".list .one1 img").fadeTo("slow",0.1); $(".list .one2 img").fadeTo("normal",0.2); $(".list .one3 img").fadeTo("fast",0.3); $(".list .one4 img").fadeTo(1000,0.4); $(".list .one5 img").fadeTo(3000,0.4); $(".list img").fadeTo("slow",1)..

Definition .fadeOut() 메서는 선택한 요소를 천천히 숨김니다. Syntax $("selector").fadeOut() Compatibility 6 7 8 9 10 11 .fadeOut() Sample1 클릭하면 이미지가 없어지는 예제입니다. 효과(Effect) 1 2 3 $(".one1 img").hide(); $(".one2 img").fadeOut(); $(".one3 img").slideUp(); $(".list img").show(); 효과(Effect) 1 2 3 $(".one1 img").hide(); $(".one2 img").fadeOut(); $(".one3 img").slideUp(); $(".list img").show(); Sample2 클릭하면 이미지가 속도에 따라..

Definition .fadeIn() 메서드는 선택한 요소를 천천히 보여줍니다. Syntax $("selector").fadeIn() Compatibility 6 7 8 9 10 11 .fadeIn() Sample1 클릭하면 이미지가 나타나는 예제입니다. 효과(Effect) 1 2 3 4 $(".one1").show(); $(".one2").fadeIn(); $(".one3").slideDown(); $(".list li").hide(); 효과(Effect) 1 2 3 4 $(".one1").show(); $(".one2").fadeIn(); $(".one3").slideDown(); $(".list li").hide(); Sample2 클릭하면 이미지가 속도에 따라 나타나는 예제입니다. 효과(Effec..

Definition .stop() 메서드는 실행중인 애니메이션을 정지합니다. Syntax $("selector").stop() Compatibility 6 7 8 9 10 11 .stop() Share

Definition .queue() 메서드는 선택한 요소 스택에 대기 중인 큐를 반환하거나 추가할 수 있습니다. Syntax $("selector").queue() Compatibility 6 7 8 9 10 11 .queue() Share

Definition .finish() 메서드는 선택한 요소의 진행중인 애니메이션을 강제로 종료합니다. Syntax $("selector").finish(); Compatibility 6 7 8 9 10 11 .finish() Share

Definition .dequeue() 메서드는 스택에 쌓인 큐를 모두 제거합니다. Syntax $("selector").dequeue(); Compatibility 6 7 8 9 10 11 .dequeue() Share

Definition .delay() 메서드는 애니메이션 효과를 지연합니다. Syntax $("selector").delay() Compatibility 6 7 8 9 10 11 .delay() Share

Definition .clearQueue() 메서드는 첫 번째 큐만 실행하고 나머지 대기 중인 큐는 모두 삭제합니다. Syntax $("selector").clearQueue(); Compatibility 6 7 8 9 10 11 .clearQueue() Share

Definition .animate() 메서드는 선택한 요소에 애니메이션을 적용합니다. Syntax $("selector").animate(); Compatibility 6 7 8 9 10 11 .animate() Sample1 클릭하면 이미지가 움직이는 예제입니다. animation Click Sample2 클릭하면 width값이 변경되는 예제입니다. animation Click Sample3 slideToggle이 되는 애니메이션 예제입니다. animation Click Sample4 크기와 투명도가 변경되는 애니메이션 예제입니다. animation Click Sample5 크기, 투명도, 보더레디우스가 변경되는 애니메이션 예제입니다. animation Click Sample6 크기, 투명도, 보더가..

Definition .toggle() 메서드는 선택한 요소를 숨김/노출합니다. Syntax $("selector").toggle(); Compatibility 6 7 8 9 10 11 .toggle() Sample1 클릭하면 없어지고, 클릭하면 나타나는 예제입니다. 효과(Effect) 1 2 3 4 5 Click $(".list li").toggle(); Click $(".list li").toggle("fast"); Click $(".list li").toggle("normal"); Click $(".list li").toggle("slow"); Click $(".list li").toggle(2000); 효과(Effect) 1 2 3 4 5 Click $(".list li").toggle(); Cli..

Definition .show() 메서드는 선택한 요소를 보여줍니다. Syntax $("selector").show(); Compatibility 6 7 8 9 10 11 .show() Sample1 이미지를 보여주는 예제입니다. 효과(Effect) 1 2 3 $(".list .one1 img").show(); $(".list .one2 img").fadeIn(); $(".list .one3 img").slidedown(); $(".list img").hide(); 효과(Effect) 1 2 3 $(".list .one1 img").show(); $(".list .one2 img").fadeIn(); $(".list .one3 img").slidedown(); $(".list img").hide(); S..

Definition .hide() 메서드는 선택한 요소를 숨김니다. Syntax $("selector").hide(); Compatibility 6 7 8 9 10 11 .hide() Sample1 클릭하면 이미지가 없어지는 예제입니다. 효과(Effect) 1 2 3 $(".one1 img").hide(); $(".one2 img").fadeOut(); $(".one3 img").slideUp(); $(".list img").show(); 효과(Effect) 1 2 3 $(".one1 img").hide(); $(".one2 img").fadeOut(); $(".one3 img").slideUp(); $(".list img").show(); Sample2 클릭하면 이미지가 속도에 따라 없어지는 예제입니다..

Definition :target 셀렉터는 이벤트를 발생한 타겟을 선택합니다. Syntax $(":target").메서드; Compatibility 6 7 8 9 10 11 :target Share

Definition :root 셀렉터는 문서의 루트 요소를 선택합니다. Syntax $(":root").메서드; Compatibility 6 7 8 9 10 11 :root Share

Definition :odd 셀렉터는 선택된 요소 중에서 홀수 번째 요소를 선택합니다. Syntax $(":odd").메서드; Compatibility 6 7 8 9 10 11 :odd Sample1 :odd() 예제입니다. 선택자(Selectors) :eq() 셀렉터는 선택된 태그의 인덱스 번호를 통해 선택합니다. :even 셀렉터는 선택된 태그의 짝수번째 요소를 찾아 선택합니다. :first 셀렉터는 선택된 태그의 첫 번째 요소를 찾아 선택합니다. :gt() 셀렉터는 선택된 태그에서 인덱스보다 큰 인덱스를 가지고 있는 태그를 선택합니다. :header 셀럭터는 제목요소(h1~h6) 태그들을 선택합니다. :lang() 셀렉터는 언어 속성이 설정된 태그를 선택합니다. :last 셀렉터는 선택된 요소 중에..

Definition :not() 셀렉터는 현재 선택한 요소의 반대 요소를 선택합니다. Syntax $(":not()").메서드; Compatibility 6 7 8 9 10 11 :not() Sample1 :not() 예제입니다. 선택자(Selectors) :eq() 셀렉터는 선택된 태그의 인덱스 번호를 통해 선택합니다. :even 셀렉터는 선택된 태그의 짝수번째 요소를 찾아 선택합니다. :first 셀렉터는 선택된 태그의 첫 번째 요소를 찾아 선택합니다. :gt() 셀렉터는 선택된 태그에서 인덱스보다 큰 인덱스를 가지고 있는 태그를 선택합니다. :header 셀럭터는 제목요소(h1~h6) 태그들을 선택합니다. :lang() 셀렉터는 언어 속성이 설정된 태그를 선택합니다. :last 셀렉터는 선택된 요소..

Definition :lt(index) 셀렉터는 선택된 태그에서 인덱스보다 작은 인덱스를 가지고 있는 태그를 선택합니다. Syntax $(":lt()").메서드; Compatibility 6 7 8 9 10 11 :lt() Sample1 :lt() 예제입니다. 선택자(Selectors) :eq() 셀렉터는 선택된 태그의 인덱스 번호를 통해 선택합니다. :even 셀렉터는 선택된 태그의 짝수번째 요소를 찾아 선택합니다. :first 셀렉터는 선택된 태그의 첫 번째 요소를 찾아 선택합니다. :gt() 셀렉터는 선택된 태그에서 인덱스보다 큰 인덱스를 가지고 있는 태그를 선택합니다. :header 셀럭터는 제목요소(h1~h6) 태그들을 선택합니다. :lang() 셀렉터는 언어 속성이 설정된 태그를 선택합니다. ..

Definition :last 셀렉터는 선택된 요소 중에서 마지막 번째 요소를 선택합니다. Syntax $(":last").메서드; Compatibility 6 7 8 9 10 11 :last Sample1 :last 예제입니다. 선택자(Selectors) :eq() 셀렉터는 선택된 태그의 인덱스 번호를 통해 선택합니다. :even 셀렉터는 선택된 태그의 짝수번째 요소를 찾아 선택합니다. :first 셀렉터는 선택된 태그의 첫 번째 요소를 찾아 선택합니다. :gt() 셀렉터는 선택된 태그에서 인덱스보다 큰 인덱스를 가지고 있는 태그를 선택합니다. :header 셀럭터는 제목요소(h1~h6) 태그들을 선택합니다. :lang() 셀렉터는 언어 속성이 설정된 태그를 선택합니다. :last 셀렉터는 선택된 요소..

Definition :lang() 셀렉터는 언어 속성이 설정된 태그를 선택합니다. Syntax $(":lang()").메서드; Compatibility 6 7 8 9 10 11 :lang() Sample1 :lang() 예제입니다. 선택자(Selectors) :eq() 셀렉터는 선택된 태그의 인덱스 번호를 통해 선택합니다. :even 셀렉터는 선택된 태그의 짝수번째 요소를 찾아 선택합니다. :first 셀렉터는 선택된 태그의 첫 번째 요소를 찾아 선택합니다. :gt() 셀렉터는 선택된 태그에서 인덱스보다 큰 인덱스를 가지고 있는 태그를 선택합니다. :header 셀럭터는 제목요소(h1~h6) 태그들을 선택합니다. :lang() 셀렉터는 언어 속성이 설정된 태그를 선택합니다. :last 셀렉터는 선택된 요..

Definition :header 셀럭터는 제목요소(h1~h6) 태그들을 선택합니다. Syntax $(":header").메서드; Compatibility 6 7 8 9 10 11 :header Sample1 :header 예제입니다. 선택자(Selectors) :eq() 셀렉터는 선택된 태그의 인덱스 번호를 통해 선택합니다. :even 셀렉터는 선택된 태그의 짝수번째 요소를 찾아 선택합니다. :first 셀렉터는 선택된 태그의 첫 번째 요소를 찾아 선택합니다. :gt() 셀렉터는 선택된 태그에서 인덱스보다 큰 인덱스를 가지고 있는 태그를 선택합니다. :header 셀럭터는 제목요소(h1~h6) 태그들을 선택합니다. :lang() 셀렉터는 언어 속성이 설정된 태그를 선택합니다. :last 셀렉터는 선택된..

Definition :gt(index) 셀렉터는 선택된 태그에서 인덱스보다 큰 인덱스를 가지고 있는 태그를 선택합니다. Syntax $("div:gt(index)").메서드; Compatibility 6 7 8 9 10 11 :gt() Sample1 :gt() 예제입니다. 선택자(Selectors) :eq() 셀렉터는 선택된 태그의 인덱스 번호를 통해 선택합니다. :even 셀렉터는 선택된 태그의 짝수번째 요소를 찾아 선택합니다. :first 셀렉터는 선택된 태그의 첫 번째 요소를 찾아 선택합니다. :gt() 셀렉터는 선택된 태그에서 인덱스보다 큰 인덱스를 가지고 있는 태그를 선택합니다. :header 셀럭터는 제목요소(h1~h6) 태그들을 선택합니다. :lang() 셀렉터는 언어 속성이 설정된 태그를 ..

Definition :first 셀렉터는 선택된 태그의 첫 번째 요소를 찾아 선택합니다. Syntax $("div:first").메서드; Compatibility 6 7 8 9 10 11 :first Sample1 :first 예제입니다. 선택자(Selectors) :eq() 셀렉터는 선택된 태그의 인덱스 번호를 통해 선택합니다. :even 셀렉터는 선택된 태그의 짝수번째 요소를 찾아 선택합니다. :first 셀렉터는 선택된 태그의 첫 번째 요소를 찾아 선택합니다. :gt() 셀렉터는 선택된 태그에서 인덱스보다 큰 인덱스를 가지고 있는 태그를 선택합니다. :header 셀럭터는 제목요소(h1~h6) 태그들을 선택합니다. :lang() 셀렉터는 언어 속성이 설정된 태그를 선택합니다. :last 셀렉터는 선..

Definition :even 셀렉터는 선택된 태그의 짝수번째 요소를 찾아 선택합니다. Syntax $("div:even").메서드; Compatibility 6 7 8 9 10 11 :even Sample1 :even 예제입니다. 선택자(Selectors) :eq() 셀렉터는 선택된 태그의 인덱스 번호를 통해 선택합니다. :even 셀렉터는 선택된 태그의 짝수번째 요소를 찾아 선택합니다. :first 셀렉터는 선택된 태그의 첫 번째 요소를 찾아 선택합니다. :gt() 셀렉터는 선택된 태그에서 인덱스보다 큰 인덱스를 가지고 있는 태그를 선택합니다. :header 셀럭터는 제목요소(h1~h6) 태그들을 선택합니다. :lang() 셀렉터는 언어 속성이 설정된 태그를 선택합니다. :last 셀렉터는 선택된 요..