jQuery Cycle - остановить циклическое перемещение нескольких слайдов за один раз

Question

Итак, у меня есть настраиваемый переход, который анимирует различные элементы за раз. Когда пользователь быстро нажимает следующую кнопку слайда (до завершения анимации), он вызывает всевозможные проблемы. Как я могу это решить? Я попробовал nooby идею добавления/удаления активного класса в ссылках, но это не сработало.

Вот jfiddle, чтобы показать проблему: http://jsfiddle.net/SHRA6/12/

Вот мои ЯШИ:

$.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', 
}); 

Дополнительная проблема вызывает фон (основной слайд) вспыхивать, а не угасание в использовании непрозрачность.

Answer 1

Вы можете попробовать использовать .stop() перед тем, как одушевленных так $feature.stop().animate(/* your code */) и т.д.

Если вы действительно хотите отключить элементы управления вам придется внедриться в onPrevNextEvent:. В элегантном решении есть еще stack overflow question.

Они используют прозрачный элемент блока поверх элементов управления, чтобы отключить их во время выполнения события. Оформить последнее редактирование и скрипку в вопросе.

EDIT: Вы испытывали странное поведение из-за этой линии

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

Возьмите чек обратного вызова и поставить его сразу после этого анимационного вызова.