jQuery - Effect Method

Effect Method

• show( ) / hide( )
• fadeIn( ) / fadeOut( )
• slideDown( ) / slideUp( )

1. show / hide

🐱‍👤 show( )

• 요소를 점점 커지게 하면서 화면에 나타낸다
• 요소에 적용된 display : none 스타일을 제거한다.

🐱‍👤 hide( )

• 요소를 점점 작아지게하고 결국 화면에서 사라지게 한다.
• 요소에 display : none 스타일을 추가한다.

2. fadeIn / fadeOut

🐱‍👤 fadeIn( )

• 투명한 상태에서 점점 선명해진다.
• opacity 스타일을 변경하여 display : none 스타일을 제거한다.

🐱‍👤 fadeOut( )

• 요소를 점점 투명하게하고 화면에서 사라지게 한다.
• opacity 스타일을 변경하여 display : none 스타일을 추가한다.

3. slideDown / slideUp

🐱‍👤 slideDown( )

• 위에서 아래로 내려오는 동작 (펼치기)
• height를 변경하여 display : none 스타일을 제거한다.

🐱‍👤 slideUp( )

• 아래에서 위로 올라가는 동작 (접기)
• height를 변경하여 display : none 스타일을 추가한다.

4. toggle

🐱‍👤 토글 (toggle) 이란?

• 하나의 버튼에 두 가지 상태를 지정하는 것 (스위치)

🐱‍👤 togle( )

• 요소의 display 상태에 따라서 show( )와 hide( )를 수행한다.

토글 기능

  $("#toggle-btn").on("click",function(){
  	
    if($("#img1").css("display") == "none"){
    	$("#img1").show(1000);
    }else{
    	$("#img1").hide(1000);
    }
  });

토글 메서드

$("#toggle-btn2").on("click",function(){
	$("#img1").toggle(1000);
});