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

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

.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 );
      });
    });
  });
});