CODEWITHSUNDEEP
jqueryjquery-cycle
Michael
Michael

Reputation: 99

jQuery Cycle - Stop cycling multiple slides at a time

So I have a custom transition which animates various elements at a time. When the user clicks the next slide button quickly (before the animation is finished) it causes all sorts of problems. How do I solve this? I tried a nooby idea of adding/removing the active class on the links but that didn't work.

Here is a jfiddle to show the problem: http://jsfiddle.net/SHRA6/12/

Here is my js:

$.fn.cycle.transitions.slideCustom = function($cont, $slides, opts) {
    $caption = $('.serverbig')
    $feature = $('.featurehol')
    $heading = $('h2')
    opts.fxFn = function(curr,next,opts,cb,fwd) {
        $feature.animate({ top: '350px' }, 500, opts.easing);
        $heading.animate({ left: '-550px' }, 500, opts.easing);
        $caption.animate({ right: '-550px' }, 500, opts.easing,  function() {
            $(curr).animate({ opacity: 0 }, 500, opts.easing, function() {
            });         
            $(next).css({ display: 'block'}).animate({ opacity: 1 }, 500, opts.easing);
            $feature.animate({ top: '66px' }, 500, opts.easing);
            $heading.animate({ left: '0' }, 500, opts.easing);
            $caption.animate({ right: '0px' }, 500, opts.easing, function() {
            if(cb) cb();
            });
        });
    }
}
 $('#sliderb').cycle({ 
    fx:     'slideCustom', 
    speed:  'slow', 
    timeout: 0, 
    next:   '.nextslide', 
    prev:   '.prevslide',
    easing: 'easeInOutBack',
    slideExpr: '.slide',
});

An additional problem causes the background (main slide) to flash in, instead of fading in using the opacity animation.

Upvotes: 1

Views: 489

Answers (1)

Bogdan Rybak
Bogdan Rybak

Reputation: 2117

You can try using .stop() before animate like so $feature.stop().animate(/* your code */) etc.

If you actually wanna disable the controls you will have to hook into onPrevNextEvent:. There's an elegant solution in another stack overflow question.

They use a transparent block element on top of the controls to disable them while the event is in progress. Checkout the last edit and fiddle in the question.

EDIT: You were experiencing strange behaviour due to this line

 $caption.animate({ right: '0px' }, 500, opts.easing, function() {
            if(cb) cb();
 });

Take the callback check and put it right after this animation call.

Upvotes: 1

Related Questions