jQuery 효과

  • 이전 페이지
  • 다음 페이지

jQuery는 숨기기, 표시, 전환, 슬라이딩 및 사용자 정의 애니메이션 등의 효과를 생성할 수 있습니다.

직접 테스트해 보세요

이 jQuery 효과를 시험해 보세요：

CodeW3C.com - 최고의 Web 기술 튜토리얼 사이트

CodeW3C.com에서 필요한 모든 웹 사이트 구축 튜토리얼을 찾을 수 있습니다。

여기를 클릭하세요

실례

jQuery hide()
간단한 jQuery hide() 함수를 시연합니다。
jQuery hide()
또 다른 hide() 시연. 일부 텍스트를 숨기는 방법을 보여줍니다。
jQuery slideToggle()
간단한 슬라이드 패널 효과를 시연합니다。
jQuery fadeTo()
간단한 jQuery fadeTo() 함수를 시연합니다。
jQuery animate()
간단한 jQuery animate() 함수를 시연합니다。

jQuery 숨기기와 보이기

hide()와 show() 두 함수를 통해 jQuery는 HTML 요소의 숨기기와 보이기에 지원합니다：

실례

$$("#hide").click(function(){
$$("p").hide();
});
$$("#show").click(function(){
$$("p").show();
});

직접 테스트해 보세요

hide()와 show()는 모두 speed와 callback 두 가지 선택 사항을 설정할 수 있습니다。

문법：

$$(\selector).hide(speed,callback)
$$(\selector).show(speed,callback)

speed 파라미터는 보이거나 숨기는 속도를 정의합니다. "slow", "fast", "normal" 또는 밀리초로 설정할 수 있습니다。

callback 파라미터는 hide 또는 show 함수가 완료된 후 실행되는 함수 이름입니다. 본 튜토리얼의 다음 장에서 더 많이 배울 것입니다： callback 매개변수에 대한 지식.

실례

$("button").click(function(){
$$("p").hide(1000);
});

직접 테스트해 보세요

jQuery 전환

jQuery toggle() 함수는 show() 또는 hide() 함수를 사용하여 HTML 요소의 보이는 상태를 전환합니다。

보이는 요소를 숨기고 숨겨진 요소를 보여줍니다。

문법：

$$(\selector).toggle(speed,callback)

speed 이러한 값들을 설정할 수 있습니다: "slow", "fast", "normal" 또는 밀리초.

실례

$("button").click(function(){
$$("p").toggle();
});

직접 테스트해 보세요

callback 이 함수가 완료된 후 실행되는 함수 이름입니다. 이 튜토리얼의 아래 장에서 더 많은 내용을 배울 수 있습니다. callback 매개변수에 대한 지식.

jQuery 슬라이드 함수 - slideDown, slideUp, slideToggle

jQuery는 다음과 같은 슬라이드 함수를 가지고 있습니다：

$$(\selector).slideDown(speed,callback)
$$(\selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)

speed 이러한 값들을 설정할 수 있습니다: "slow", "fast", "normal" 또는 밀리초.

callback 이 함수가 완료된 후 실행되는 함수 이름입니다. 이 튜토리얼의 아래 장에서 더 많은 내용을 배울 수 있습니다. callback 매개변수에 대한 지식.

slideDown() 예제

$(".flip").click(function(){
$(".panel").slideDown();
});

직접 테스트해 보세요

slideUp() 예제

$(".flip").click(function(){
$(".panel").slideUp();
})

직접 테스트해 보세요

slideToggle() 예제

$(".flip").click(function(){
$(".panel").slideToggle();
});

직접 테스트해 보세요

jQuery Fade 함수 - fadeIn(), fadeOut(), fadeTo()

jQuery는 다음과 같은 fade 함수를 제공합니다:

$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)

speed 이러한 값들을 설정할 수 있습니다: "slow", "fast", "normal" 또는 밀리초.

fadeTo() 함수에서 opacity 이 매개변수는 지정된 불투명도로 약화됩니다.

callback 이 함수가 완료된 후 실행되는 함수 이름입니다. 이 튜토리얼의 아래 장에서 더 많은 내용을 배울 수 있습니다. callback 매개변수에 대한 지식.

fadeTo() 예제

$("button").click(function(){
$("div").fadeTo("slow",0.25);
});

직접 테스트해 보세요

fadeOut() 예제

$("button").click(function(){
$("div").fadeOut(4000);
});

직접 테스트해 보세요

jQuery 커스텀 애니메이션

jQuery 함수는 다음과 같은 문법으로 사용된다:

$(selector).animate({params},[duration],[easing],[callback])

기본적인 매개변수는 params애니메이션을 생성할 CSS 속성을 정의합니다. 여러 이러한 속성을 동시에 설정할 수 있습니다:

$(selector).animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});

두 번째 매개변수는 duration애니메이션에 적용할 시간을 정의합니다. 설정할 수 있는 값은: "slow", "fast", "normal" 또는 밀리초입니다.

예제 1

<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script>

직접 테스트해 보세요

예제 2

<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script>

직접 테스트해 보세요

HTML 요소는 기본적으로 정적 위치로 설정되어 있으며 이동할 수 없습니다.

요소를 이동할 수 있도록 하려면 CSS의 position을 relative 또는 absolute로 설정합니다.

jQuery 효과 - 이 페이지에서

함수 설명
$(selector).hide() 선택된 요소를 숨깁니다
$(selector).show() 선택된 요소를 보이게 만듭니다
$(selector).toggle() 선택된 요소를 숨기기와 보이기 사이에서 전환
$(selector).slideDown() 선택된 요소를 하강(보이게)합니다
$(selector).slideUp() 선택된 요소를 상승(숨기기)합니다
$(selector).slideToggle() 선택된 요소에 상승 및 하강 슬라이드를 전환
$(selector).fadeIn() 선택된 요소를 반짝이게 만듭니다
$(selector).fadeOut() 선택된 요소를 흐리게 만듭니다
$(selector).fadeTo() 선택된 요소를 주어진 불투명도로 흐리게 만듭니다
$(selector).animate() 선택된 요소에 사용자 정의 애니메이션을 실행

완전한 참조 매뉴얼을 확인하려면 우리의 jQuery 효과 참조 매뉴얼。

  • 이전 페이지
  • 다음 페이지