두 번째 애니메이션이 작동하지 않습니다.

Question

UL 목록에서 첫 번째 LI를 애니메이션으로 적용하고 싶습니다. 첫 번째 애니메이션은 파란색 배경의 CSS 클래스를 제거하고 새 CSS를 추가하여 어두운 배경을 만듭니다. 또한 내부에 새로운 코드 행을 추가합니다. 두 번째 애니메이션은 동일한 div를 사라지게하여 사라 지므로 사라집니다. 그런 다음 제거됩니다.

내가 테스트 한 두 애니메이션은 다른 애니메이션을 주석 처리하고 적절하게 작동하여 구분되었습니다. 문제는 내가 함께 실행할 수 없다는 것입니다. 첫 번째 애니메이션을 실행하면 두 번째 애니메이션이 전혀 작동하지 않습니다.

listTop = $('#ypPlaylist > ul li:first'); 

setTimeout(function() 
{ 
    listTop.css('background', '#2d89ef').removeClass('bg-color-blue'); 
    listTop.animate({ backgroundColor: '#1d1d1d' }, 300); 
    listTop.prepend('<b>Running: </b>').fadeTo(300); 
}, 1000) 

setTimeout(function() 
{ 
    listTop.animate({ marginTop: '-=82px', opacity: 0 }, 800, function() 
    { 
     listTop.remove(); 
    }); 
}, 3000); 

Answer 1

모든 것을 함께 연결하고 그 사이에 지연을 설정하고 setTimeouts-function을 제거 할 수 있습니다. 체크 아웃 http://api.jquery.com/animate/ 및 http://api.jquery.com/delay/
$('#foo').slideUp(300).delay(800).fadeIn(400);