Llame a un evento una vez que el primer evento haya terminado

Tengo problemas para convocar un evento una vez que un evento ha terminado de animar.

Tengo 2 eventos en ejecución. Lo que bash lograr es cuando el primer evento está completamente terminado (está controlado por una función de clic) y luego quiero ejecutar el segundo evento que se desvanecerá en mis enlaces. Intenté aplicar una función .done para cuando #slidingMenu animado, pero los enlaces no se desvanecen una vez que se completa la animación, simplemente permanecen estáticos.

Menú (al hacer clic)

$(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'); } }); }); }) 

Los enlaces de menú se desvanecen

  $.when.apply(this, '#slidingMenu').done(function() { $('.menu-item').each(function(i) { $(this).fadeOut(0).delay(1000*i).fadeIn(1850); }); }); 

http://jsfiddle.net/xhnsnbrz/7/

Puede agregar una función de callback a la función animate , que se ejecuta cuando finaliza la animación:

 $(element).animate(options, timeout, callbackFunction); 

Entonces, en tu caso, puedes poner tu fadeOut dentro de una función allí:

 $('#slidingMenu').stop().animate({ left: '0px' }, 500, function(){ $('.menu-item').each(function(i) { $(this).fadeOut(0).delay(1000*i).fadeIn(1850); }); }); 

Trabajo jsFiddle

Como puede ver, los elementos del menú son brevemente visibles porque solo están ocultos una vez que la animación ha finalizado. Una forma mejor sería ocultarlo antes de comenzar la animación, y solo hacer el fadeIn en la callback:

 $('.menu-item').fadeOut(0); // no need for an each here $('#slidingMenu').stop().animate({ left: '0px' }, 500, function(){ $('.menu-item').each(function(i) { $(this).delay(1000*i).fadeIn(1850); }); }); 

También con un jsFiddle

Lo que haría es tener una variable que solo está configurada en True al final del primer evento. p.ej

check = False

Your_event_1 check = True

if (check == True): Your_event_2