jQuery / 요소가 순서대로 나타나게 하는 방법

.animate()로 요소를 나타내기

다음과 같이 간단한 예제를 만듭니다.

opacity의 값을 0으로 정하여 보이지 않게 합니다. 보이지 않을 뿐, 공간은 차지한 상태입니다.

jQuery의 .animate()를 이용하여 서서히 나타나게 만듭니다.

전체 코드는 다음과 같습니다.

연달아 나타나게 하기

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

  • 하나의 요소가 나온 후 그 다음 요소가 나오게 하기 위해서 콜백 함수를 사용합니다.
  • 시간 조절을 편하게 하기 위해서 jbTime이라는 변수를 만들었습니다. 그 값을 변경하면 나타나는 속도가 한 번에 바뀝니다.

jQuery 강좌

인기 글

Sorry. No data so far.