jQuery Cycle - Stop cycling multiple slides at a time

Question

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.

It would be much easier to help if you make a live example in http://jsfiddle.net — Trufa, Feb 11 '13 at 01:31
Pressing the Next button doesn't seem do be doing anything in the fiddle — Bogdan Rybak, Feb 11 '13 at 02:01
I added the resource http://ajax.aspnetcdn.com/ajax/jquery.cycle/2.99/jquery.cycle.all.js — Michael, Feb 11 '13 at 02:05
Maybe that isn't added for everyone? I've never used fiddle before. EDIT: I also just changed the link, now? — Michael, Feb 11 '13 at 02:05

score 1 · Accepted Answer · edited May 23 '17 at 11:48

1

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.

edited May 23 '17 at 11:48

Community

1
1

answered Feb 11 '13 at 01:59

Bogdan Rybak

2,107
1
19
22

Yes that works, although I would prefer for it not to interrupt the current animation. – Michael Feb 11 '13 at 02:04
What exactly are the "problems" though? – Bogdan Rybak Feb 11 '13 at 02:08
Hopefully the jfiddle should be working now. The background color basically changes a few times and then very choppily the content for the correct slide is animated in. – Michael Feb 11 '13 at 02:11
Do you want to disable the link for the time of animation? – Bogdan Rybak Feb 11 '13 at 02:28
Yes that was my original idea but the way I tried didn't seem to work. – Michael Feb 11 '13 at 02:30
Found solution here http://stackoverflow.com/questions/8001490/disable-a-next-previous-buttonlink-temporarily-when-clicked-in-jquery-cycle-pl – Bogdan Rybak Feb 11 '13 at 02:54
Hmmn, that is similar to what I tried. But if you click very quickly for a while it breaks that for some reason (to do with the 2 stages of animation I think) http://jsfiddle.net/SHRA6/24/ – Michael Feb 11 '13 at 03:16
It seems like the cb() function inside the last animation callback was messing things up! Check this one http://jsfiddle.net/SHRA6/29/ – Bogdan Rybak Feb 11 '13 at 19:21
Nice! I actually stuck with the stop method because it means you can skip a couple slides really quickly if you want. This above method is probably best in most cases though. – Michael Feb 11 '13 at 19:55

jQuery Cycle - Stop cycling multiple slides at a time

1 Answers1