JQuery_효과 메서드

<효과 메서드>

선택한 요소를 역동적으로 숨겼다가 보이게 만드는 기능

 

<기본형>

 

 

 

<종류>

 

1. 숨김

• hide() : 요소를 숨김
• fadeOut() : 투명해지면서 사라짐
• slideUp() : 위로 접히며 서라짐

$(".btn1").on("click",function(){
    $(".box").slideUp(1000,"linear",function(){ //효과주는 함수 포함 요소 (커튼느낌 시간, 가속도, 콜백함수)
        $(".btn1").hide();
        $(".btn2").show();
		});
 });

 

2. 노출

• show() : 요소를 노출
• fadeIn() : 숨겨진 요소가 점점 선명해짐
• slide() : 숨겨진 요소가 아래로 펼쳐침

$(".btn2").on("click",function(){
     $(".box").fadeIn(1000,"swing",function(){
     	$(".btn2").hide();
        $(".btn1").show();
 });
});

 

 

3. 노출, 숨김

• toggle() : hide, show 효과를 적용
• fadeToggle() : fadeIn, fadeOut 효과를 적용
• slideToggle() : slideUp, slideDown 효과 적용
• fadeTo() : 지정한 투며오 적용

$(".btn3").on("click",function(){
       $(".box").slideToggle(1000,"linear")
});