jQuery - 사라짐 hide() 나타남 show() Effects

hide와 show 메서드 또한 웹에 동적인 느낌을 주기에 유용합니다.

click 이나 mouseover, mouseenter 와 같은 이벤트와 자주 함께 쓰이는 것 같습니다.

 

 

문법

$( selector ).hide( duration [, easing] [, complete] );

$( selector ).show( duration [, easing] [, callback] );

 

duration

숨겨지는 또는 나타나는 속도를 지정하며 밀리초 단위입니다.

기재하지 않으면 디폴트값인 400밀리초로 표현됩니다.

숫자 대신 예약어인 'fast' 나 'slow' 를 기재할 수도 있습니다.

'fast'는 200밀리초로 표현되며, 'slow'는 600밀리초로 표현됩니다.

 

easing

애니메이션의 속도표현을 나타내는데, 기재하지 않으면 디폴트값은 'swing' 입니다.

'swing' : 처음과 끝에는 느리고 중간지점은 빠른 애니메이션

'linear' : 일정한 속도를 가지는 애니메이션

 

complete

선택적으로 적용하면 됩니다.

hide나 show가 완료되면 콜백 함수가 실행됩니다.

이 부분은 서로 다른 애니메이션을 순서대로 묶는데 유용합니다.

 

 

스크립트 예제

$( "#btn" ).click(function() { /* #btn Click here 버튼을 클릭하면 */
  $( "#contents" ).hide( "slow", function() { /* #contents 회색박스가 "slow" 속도로 사라진다 */
    alert( "Animation complete." ); /* 사라진 후, 콜백함수로 "Animation complete." 팝업창이 노출된다 */
  });
});

 

 

결과화면 (일회용)

 

 

 

[참고] https://www.w3schools.com/jquery/eff_hide.asp

[참고] https://api.jquery.com/hide/