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

2021. 6. 17. 18:06JQuery

출처 : https://www.codingfactory.net/11812

 

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

.animate()로 요소를 나타내기 다음과 같이 간단한 예제를 만듭니다.

 

<p class="jb jb-1">자세히 보아야 좋아진다</p>
<p class="jb jb-2">오래 관리해야 올라간다</p>
<strong class="jb jb-3">신용점수가 그렇다</strong>

.jb {opacity: 0; }

function animationSequential(){
    var jbTime = 1000;
    $( '.jb-1' ).animate( {
      opacity: '1'
    }, jbTime, function() {
      $( '.jb-2' ).animate( {
        opacity: '1'
      }, jbTime, function() {
        $( '.jb-3' ).animate( {
          opacity: '1'
        }, jbTime, function(){
          $('.jb-4').animate({
            opacity: '1'
          });
        } );
      } );
    } );

}