jQuery Cycle - 'before' function to complete before animating to the next slide

I'm using the jQuery Cycle plugin for a slider - I need to complete a function when the next link is clicked before the slider moves onto the next slide.

At the moment I can't see anyway to prevent the next action firing before the 'before' function is complete. I'm using the code below.

$('#marques-slider').cycle({
fx: 'scrollHorz',
tra开发者_如何学JAVAnsition: 'scrollHorz',
timeout:  0,
prev:    '#prev-slide',
    next:    '#next-slide',
    pager:   '#nav', 
    easing: 'easeInOutExpo',
    speed:  1000,
    before:  slideUp, 
    after:   slideDown,
    startingSlide: 1
});

At present both my onBefore function and the next slide function are animating at the same time.

I also tried creating the next links outside of the plugin:

            $('#next-slide').click(function(){
                $('.marques-product-content').animate({
                    height : '0'
                }, function(){
                    $('#marques-slider').cycle('next');
                });
                return false;
            });

but this causes some funky behaviour with the slides backfground images changing before animating and the function is only working on the first click :/

---

There seems to be no way for the 'next' function to wait for your 'before' complete through the plugin methods.

However delving into the cycle.js code you can delay the next functions on theses lines:

var fn = function() {$n.delay(800).animate(opts.animIn, speedIn, easeIn, cb)};
$l.delay(800).animate(opts.animOut, speedOut, easeOut, function() {
    if (opts.cssAfter) $l.css(opts.cssAfter);
    if (!opts.sync) fn();
});

Approx line 860 - (not accurate as I added some notes/comments/customisations through the code). Here I added the .delay(800) which gives the desired effect.

---

Can't you just call a separate function that does wait?

$('#slideshow').cycle({
before: onBefore,
after: onAfter
});

function onBefore(curr, next, opts){
   //Before changing slides do this
};

function onAfter(curr, next, opts){

//here, set your delay or a loop that continues until the slide is not animating,
//at which time it will proceed to fire the script you want

//The code below loops doing nothing if the element's animation is not complete.
//or else once the animation is complete it does something and stops the loop.
//This way jquery cycle's "after" event will call the onAfter function and get the variables, 
//for instance the current slide element (curr) or the current slide index (opts.currSlide) 
//from the after event and hold it until the animation is complete and the slide has changed.

  for(i=0; i>0 i++){
    if( $(elem).is(':animated') ) {
       //do nothing
    }
    else { 
       //do something now that animation is complete 
       break;
    }
  }
};

The above code is not tested.

I got the variables I mentioned above,

the current slide element, "curr" and the current slide's index, "opts.currSlide"

from the jquery cycle options reference- http://jquery.malsup.com/cycle/options.html and by using "console.log(opts)" to see what's inside of opts through my Google Chrome Console.

Hope this helps.