jQuery / Method / .delay() - 실행 중인 함수를 정해진 시간만큼 중지(연기) 시키는 메서드

.delay()

.delay()는 실행 중인 함수를 정해진 시간만큼 중지(연기) 시킵니다.

문법

.delay( duration [, queueName ] )

duration에는 중지할 시간이 들어갑니다. 숫자로 정할 때의 단위는 1/1000초이고, slow 또는 fast로 정할 수 있습니다. slow는 600, fast는 200에 해당합니다.

예제

버튼을 클릭하면 문단이 위로 사라졌다가 1초 뒤에 아래로 내려옵니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'button' ).click( function() {
          $( 'p' ).slideUp( 200 ).delay( 2000 ).slideDown( 200 );
        } );
      } );
    </script>
  </head>
  <body>
    <button>Click</button>
    <p>Lorem Ipsum Dolor</p>
  </body>
</html>

Related Posts

jQuery / Selector / :contains() - 특정 문자열을 포함한 요소를 선택하는 선택자

jQuery / Selector / :contains() - 특정 문자열을 포함한 요소를 선택하는 선택자

:contains() :contains()는 특정 문자열을 포함한 요소를 선택하는 선택자입니다. 문법 $( ':contains(text)' ) 문자열 포함 여부를 따질 때 대소문자를 구분한다는 점에 주의합니다. 예를 들어 $( 'p:contains("ab")' ) ab 문자열을 포함한 p 요소를 선택합니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-1.12.4.min.js"></script> <script> ...

jQuery / Method / .text() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드

jQuery / Method / .text() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드

.text() .text()는 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꿉니다. .html()과 비슷하지만 태그의 처리가 다릅니다. 문법 1 .text() 선택한 요소 안의 내용을 가져옵니다. 태그는 가져오지 않습니다. 예를 들어 var jb = $( 'h1' ).text(); 는 h1 요소의 내용을 변수 jb에 저장합니다. 문법 2 .text( textString ) 이전 내용을 지우고 새로운 내용을 넣습니다. 예를 들어 $( 'div' ).html( '<h1>Lorem</h1>' ); 는 div ...

jQuery / Method / .addClass() - 클래스 값을 추가하는 메서드

jQuery / Method / .addClass() - 클래스 값을 추가하는 메서드

.addClass() .addClass()로 선택한 요소에 클래스 값을 추가할 수 있습니다. 문법 .addClass( className ) 클래스 값은 큰 따옴표 또는 작은 따옴표로 감쌉니다. $( 'h1' ).addClass( 'abc' ); 띄어쓰기로 구분하여 여러 개의 값을 추가할 수 있습니다. $( 'h1' ).addClass( 'ab cd ef' ); 페이지가 로드된 상태에서 클래스 값이 추가되는 것이므로, 추가되기 전의 모양에서 추가된 후의 모양으로 변하는 것을 방문자가 볼 ...

jQuery / Method / .fadeOut() - 선택한 요소를 서서히 사라지게 하는 메서드

jQuery / Method / .fadeOut() - 선택한 요소를 서서히 사라지게 하는 메서드

.fadeOut() .fadeOut()은 선택한 요소를 서서히 사라지게 합니다. 문법 .fadeOut( ) duration duration에는 완전히 사라질 때까지의 시간이 들어갑니다. fast, slow로 정하거나 400 같은 숫자로 정할 수 있습니다. 숫자일 경우 단위는 1000분의 1초이며, fast는 200, slow는 600에 해당합니다. 아무것도 입력하지 않으면 기본값 400으로 설정됩니다. 문자로 시간을 정할 때는 따옴표 안에 ...

jQuery / Method / .fadeToggle() - 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 하는 메서드

jQuery / Method / .fadeToggle() - 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 하는 메서드

.fadeToggle() .fadeToggle()은 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 합니다. 문법 .fadeToggle( ) duration duration에는 사라지거나 나타나는데 걸리는 시간을 넣습니다. fast, slow로 정하거나 1000분의 1초 단위의 숫자로 정합니다. fast는 200, slow는 600에 해당하고 기본값은 400입니다. 문자로 시간을 정할 때는 따옴표 안에 문자를 넣습니다. .fadeToggle( 'fast' ) 숫자로 시간을 정할 ...

jQuery / 특정 요소를 자식 요소로 갖지 않는 요소 선택하는 방법

jQuery / 특정 요소를 자식 요소로 갖지 않는 요소 선택하는 방법

특정 요소를 자식 요소로 갖는 요소를 선택하는 방법 jQuery의 :has 선택자를 이용해서 특정 요소를 자식 요소로 갖는 요소를 선택할 수 있습니다. 예를 들어 $( 'p:has( span )' ).css( 'color', 'red' ); 는 span 요소를 자식 요소로 갖고 있는 p 요소의 색을 빨간색으로 만듭니다. 특정 요소를 자식 요소로 갖지 않는 요소를 선택하는 방법 특정 요소를 자식 요소로 ...

jQuery / Method / .fadeIn() - 선택한 요소를 서서히 나타나게 하는 메서드

jQuery / Method / .fadeIn() - 선택한 요소를 서서히 나타나게 하는 메서드

.fadeIn() .fadeIn()은 선택한 요소를 서서히 나타나게 합니다. 문법 .fadeIn( ) duration duration에는 완전히 나타날 때까지의 시간이 들어갑니다. fast, slow로 정하거나 400 같은 숫자로 정할 수 있습니다. 숫자일 경우 단위는 1000분의 1초이며, fast는 200, slow는 600에 해당합니다. 아무것도 입력하지 않으면 기본값 400으로 설정됩니다. 문자로 시간을 정할 때는 따옴표 안에 ...

jQuery / Method / .slideUp() - 요소를 위쪽으로 사라지게 하는 메서드

jQuery / Method / .slideUp() - 요소를 위쪽으로 사라지게 하는 메서드

.slideUp() .slideUp()는 선택한 요소를 위쪽으로 서서히 사라지게 합니다. 문법 .slideUp( ) duration 요소가 사라질 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 요소가 사라지는 방식을 정합니다. swing과 linear가 가능하며, 기본값은 swing입니다. complete 요소가 사라진 후 수행할 작업을 정합니다. 예제 1 버튼을 클릭하면 파란색 배경의 div ...

jQuery / Plugin / jquery.toc / H 태그로 목차 만드는 플러그인

jQuery / Plugin / jquery.toc / H 태그로 목차 만드는 플러그인

jquery.toc jquery.toc는 HTML 문서에 있는 h1, h2 등 h 태그를 이용하여 자동으로 목차를 만들어주는 플러그인입니다. GitHub : https://github.com/ndabas/toc Download : http://ndabas.github.com/toc/assets/jquery.toc.zip 목차 클릭 시 부드럽게 이동하는 효과를 주고 싶다면 다른 플러그인을 사용하세요. 기본 사용법 h 태그가 많은 다음과 같은 HTML 문서를 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { font-family: Consolas, sans-serif; } a { color: blue; } </style> </head> <body> <h1>Lorem</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing ...

jQuery / Method / .replaceWith() - 선택한 요소를 다른 것으로 바꾸는 메서드

jQuery / Method / .replaceWith() - 선택한 요소를 다른 것으로 바꾸는 메서드

.replaceWith() .replaceWith()는 선택한 요소를 다른 것으로 바꿉니다. 문법 .replaceWith( newContent ) 예를 들어 h1 요소를 abc로 바꾸고 싶다면 다음과 같이 합니다. $( 'h1' ).replaceWith( 'abc' ); h1 요소의 내용 뿐 아니라 h1 태그까지 지우고 바꾼다는 것에 주의합니다. newContent에는 특정 요소가 들어갈 수 있습니다. 예를 들어 $( 'h1' ).replaceWith( $( 'p.a' ) ); 는 h1 요소를 클래스 값이 a인 p ...

jQuery 강좌