jQuery 애니메이션이 유창하게 실행되지 않습니다.

Question

JavaScript를 통해 애니메이션을 예약하는 방법을 배우고 있습니다. 특히 jQuery를 사용하면 더욱 그렇습니다. 일부 h1 태그를 깜박이려고했으나 애니메이션이 유창하게 실행되지 않는 것 같습니다. 잠시 멈추고 계속됩니다.
핵심 애니메이션 코드 :

function animSlideHeading() { 
    $('.slide h1').animate({ 
    opacity: .6 
    }, 500, 'swing', function() { 
    $('.slide h1').animate({ 
     opacity: 1 
    }, 500, 'swing', animSlideHeading); 
    }); 
} 

이 this JSBin를 참조하십시오.

Answer 1

셀렉터 $('.slide h1')과 일치하는 요소가 여러 개 있으므로 콜백은 애니메이션이 적용되는 각 요소에 대해 한 번 여러 번 호출되며, 더 길어질수록 이 계속 실행됩니다.

그것을 해결하기 위해 , 당신은 애니메이션 컬렉션 집합

function animSlideHeading() { 
    $('.slide h1').animate({ 
     opacity: 0.6 
    }, 500, 'swing').promise().done(function() { 
     $(this).animate({ 
      opacity: 1 
     }, 500, 'swing').promise().done(animSlideHeading); 
    }); 
} 
animSlideHeading(); 

FIDDLE

의 모든 요소를 ​​완료하면 해결 약속을 사용할 수 있습니다