jQuery cycle plugin slide delay until onBefore is finished

Question

I have tried about everything I can think of but I can't seem to delay the slide of the jQuery Cycle plugin until after animations in my onBefore are finished. I've tried using delay() and setTimeout() with cycle('toggle'). Anyone have any ideas on how to delay the next slide until everything in onBefore is finished?

$('#feature').cycle({ 
  fx:     'scrollLeft', 
  easing: 'easeOutExpo', 
  speed: 1000,  
  timeout: 3000,
  before:  onBefore
});

function onBefore(curr, next, opts, forwardFlag) { 
  $(curr).children("div").animate({  left : '960px' }, 300, function() {  });
}

Answer 1

It seems that there is no way to delay the slide transition until the onBefore is completed. As a work around I was able to do what I needed with the following by essentially describing what would happen before the next slide transitioned in the onAfter of the current slide.

/* Manually describe the animation for the first one */

$('#feature .featureStory:first').children("a").delay(4500).animate({marginTop:'100'}, 500);

/* Pass the cycle call the 'after' and 'skipInitializationCallbacks' */

$('#feature').cycle({ 
  fx: 'scrollLeft', 
  easing: "easeOutExpo",
  speed: 1000,
  timeout: 6000,
  after: onAfter,
  skipInitializationCallbacks: true
});

/* Do all of your animations for the next slide in the on onAfter of the current slide */

function onAfter(curr, next, opts, ff) {
  $(next).children(".featureStory").animate({left:'560px'}, 500, function(){ 
    $(this).children("a").animate({marginTop:'0'}, 500);
    $(this).children("a").delay(3500).animate({marginTop:'100'}, 500);
    $(next).children(".featureStory").delay(4500).animate({  left : '960px' }, 500); 
  });
}

Now I'm sure that's really quite confusing without the full context, but it should give you an idea of how to have things animate before a slide transition by using the onAfter of the previous slide and some delays to get things to execute at the appropriate time.