첫 번째 애니메이션이 완료되면 두 번째 애니메이션 호출

Question

div가로드를 완료하면 애니메이션을 호출하는 방법을 파악하는 데 문제가 있습니다. 내 말은 한 번 누르면 메뉴 시스템이 슬라이드되어 내 웹 사이트 링크가 표시된다는 것입니다. 내가 뭘 하려는지 메뉴 패널을 슬라이드 밖으로 가지고 다음 내 메뉴 링크 애니메이션을 호출합니다.

코드 메뉴에서 퇴색하는 데 사용

코드 메뉴를 내가 모든 애니메이션을 ".menu 항목"내 메뉴 링크를 호출 할 수있는 방법

$("body").not(".gn-icon-menu").click(function() { 
$(".gn-icon-menu").removeClass("on"); 
    }); 

$(".gn-icon-menu").click(function(e) { 
e.stopPropagation(); 
$(this).toggleClass("on"); 

});  

$(function() { 
    window.status = 0; 
    $('#menu').click(function() { 
    if ($('header').is('.open')) { 
     var open = $('header').is('.open'); 
     $('#slideWrapper')['slide' + (open ? 'Up' : 'Down')](400); 
     $('header').animate({ 
      bottom: (open ? '-' : '+') + '=200' 
     }, 400, function() { 
      $('header').removeClass('open'); 
     }); 

     if ($('.navFooter button').hasClass('activetoggle')) { 
      $('.navFooter button').removeClass('activetoggle'); 
      $('.navFooter button').addClass('slidingPanel'); 
      $('.navFooter button').text('Footer'); 
     } 
     if ($('.gn-icon-menu').hasClass('activetoggle')) { 
      $('.gn-icon-menu').removeClass('activetoggle'); 
      $('.gn-icon-menu').addClass('gn-icon-menu'); 

     } 
    } 
    if (window.status == 0) { 
     $('#slidingMenu').stop().animate({ 
      left: '0px' 
     }, 500); 
     window.status = 1; 
     $('#slidingMenu').addClass('open'); 
    } else { 
     $('#slidingMenu').stop().animate({ 
      left: '-100%' 
     }, 500); 
     window.status = 0; 
     $('#slidingMenu').removeClass('open'); 
    } 
    $('#slidingMenu').click(function() { 
     if ($('#slidingMenu').is('.open')) { 
    $('#slidingMenu').stop().animate({ 
     left: '-100%' 
    }, 500); 
    window.status = 0; 
    $('#slidingMenu').removeClass('open'); 
} 
    }); 
}); 
}) 

를 밀어하는 데 사용

$(document).ready(function() { 
    $('.menu-item').hide();      
    (function animatenext(elem){ 
     elem.eq(0).fadeIn("slow", function(){ 
     (elem=elem.slice(1)).length && animatenext(elem); 
    }); 
    })($('.menu-item')) 
}); 

링크 내 메뉴 시스템이 끝나면 #slidingMenu?

전체 코드 http://jsfiddle.net/xhnsnbrz/6/

Answer 1

애니메이션이 완료되면이 기능을 트리거 할 경우

$("#slidingMenu").stop().animate(
    { 
     left: '0px' 
    }, 500, animateItemMenu); 

function animateItemMenu(){ 
    // ... write your code here 
} 

출처 : http://api.jquery.com/animate/