순서대로 나타나게 하는 방법

animate로 요소를 순서대로 나타나게 하는 방법 animate를 이용하여 서서히 나타나게 만든 예제입니다.
2 min read

순서대로 요소를 나타내는 방법

.animate()를 이용하여 서서히 나타나게 만든 예제입니다.

<button>Click to animate</button>
<div class="box box-1">Hello!</div>
body {
  box-sizing: border-box;
  text-align: center;
}
.box {
  height: 100px;
  padding: 20px;
  text-align: center;
  color: #fff;
  opacity: 0;
}
.box-1 {
  background-color: #333;
}
$( document ).ready( function() {
  $( 'button' ).click( function() {
    $( '.box-1' ).animate( {
      opacity: '1'
    }, 2000 );
  });
});

 

연달아 나타나게 하는 방법

요소를 몇 개 더 만든 후 차례대로 나타나게 합니다.

  • 하나의 요소가 나온 후 그 다음 요소가 나오게 하기 위해서 콜백 함수를 사용합니다.
  • 시간 조절을 위해서 Delay이라는 변수를 만들었습니다.
  • 그 값을 변경하면 나타나는 속도가 바뀝니다.
<button>Click to animate</button>
<div class="box box-1">Hello!</div>
<div class="box box-2">Hello!</div>
<div class="box box-3">Hello!</div>
body {
  box-sizing: border-box;
  text-align: center;
}
.box {
  height: 100px;
  padding: 20px;
  text-align: center;
  color: #ffff;
  opacity: 0;
}
.box-1 {
  background-color: #333;
}
.box-2 {
  background-color: #222;
}
.box-3 {
  background-color: #111;
}
$( document ).ready( function() {
  $( 'button' ).click( function() {
    var Delay = 600;
    $( '.box-1' ).animate( {
      opacity: '1'
    }, Delay, function() {
      $( '.box-2' ).animate( {
        opacity: '1'
      }, Delay, function() {
        $( '.box-3' ).animate( {
          opacity: '1'
        }, Delay );
      });
    });
  });
});

You may like these posts

  • CDN 이용하기 HTML에 다음 코드를 추가합니다. <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>   다운로드 받아 연결하기 jQuery 다운로드는…
  • .length .length는 선택한 요소의 개수를 반환하는 속성입니다. 예를 들어 $( 'div' ).length 는 div 요소의 개수입니다.   예제 버튼을 클릭하면 li 요소의 개수를 출력합니다. <button>Cli…
  • 자식 요소의 개수를 기준으로 부모 요소을 선택하기 위해서는 스크립트를 이용해야 합니다. 다음은 jQuery를 이용한 간단한 예제입니다. <li> 요소를 3개 이상 가진 <ol> 요소를 선택해서 글자를 빨간색으로 만듭니다. …
  • jQuery.inArray() jQuery.inArray()로 배열에 특정 값이 있는지 알아낼 수 있습니다.   기본형 jQuery.inArray( value, array [, fromIndex ] ) value : 검색하고자 하는 값을 입력합니다. array : 배열의 이름을 입력합니다…
  • .hover() .hover()로 선택한 요소에 마우스 포인터를 올렸을 때, 그리고 마우스 포인터가 그 요소를 벗어났을 때 효과를 넣을 수 있습니다.   기본형 .hover( handlerIn(eventObject), handlerOut(eventObject) ) ha…
  • :button :button은 type이 button인 요소를 선택하는 선택자입니다.   기본형 $( ':button' ) type이 button인 모든 요소를 선택합니다.   $( '.xy:button' ) type이 button이면서 class 값으로 xy…

Post a Comment