javascript - Delay animation until other animation is complete (sliding content( -

javascript - Delay animation until other animation is complete (sliding content( -

i have code animates between divs sliding out. if item clicked, it's relevant content slides out. if item clicked, current content slides in , new content slides out.

however,

var lastclicked = null; var animateclasses = ['ale', 'bramling', 'bullet', 'miami-weisse']; (var i=0; i<animateclasses.length; i++) { (function(animcls) { $('.each-brew.'+animcls).toggle(function() { if (lastclicked && lastclicked != this) { // animate $(lastclicked).trigger('click'); } lastclicked = this; $('.each-brew-content.'+animcls).show().animate({ left: '0' }, 1000).css('position','inherit'); }, function() { $('.each-brew-content.'+animcls) .animate({ left: '-33.3333%' }, 1000, function() { $(this).hide()}) // hide element in animation on-complete callback .css('position','relative'); }); })(animateclasses[i]); // self calling anonymous function }

however, content sliding out 1 time open content slides sliding out - needs wait until content has slided in before slides out. possible?

here's link i'm working on thought (http://goo.gl/s8tl6).

cheers in advance, r

here's take on drop-in replacement no markup changes. want 1 of 3 things happen when menu item clicked:

if clicked item showing, hide it if else showing, hide it, show current item's content if nil showing, show current item's content var lastclicked = null; // here lastclicked points visible content var animateclasses = ['ale', 'bramling', 'bullet', 'miami-weisse']; (var i=0; i<animateclasses.length; i++) { (function(animcls) { $('.each-brew.'+animcls).click(function(event){ if(lastclicked && lastclicked == animcls){ // if lastclicked `this` hide content $('.each-brew-content.'+animcls).animate( { left: '-33.3333%' }, 1000, function() { $(this).hide(); }).css('position','relative'); lastclicked = null; }else{ if(lastclicked){ // if else lastclicked, hide it, //then trigger click on new target $('.each-brew-content.'+lastclicked).animate( { left: '-33.3333%' }, 1000, function() { $(this).hide(); $(event.target).trigger('click'); }).css('position','relative'); lastclicked = null; }else{ // if there no visible div, // show our content $('.each-brew-content.'+animcls).show() .animate({ left: '0' }, 1000) .css('position','relative'); lastclicked = animcls; } } }); })(animateclasses[i]); // self calling anonymous function }

javascript jquery slidetoggle