jQuery Cycle - функция «до» для завершения перед анимацией следующего слайда - PullRequest
Новая
       3

jQuery Cycle - функция «до» для завершения перед анимацией следующего слайда

1 голос
/ 07 марта 2011

Я использую плагин jQuery Cycle для слайдера - мне нужно завершить функцию при нажатии следующей ссылки, прежде чем слайдер перейдет на следующий слайд.

В данный момент я все равно не вижу, чтобы предотвратить запуск следующего действия до завершения функции «до». Я использую код ниже. 

$('#marques-slider').cycle({
fx: 'scrollHorz',
transition: 'scrollHorz',
timeout:  0,
prev:    '#prev-slide',
    next:    '#next-slide',
    pager:   '#nav', 
    easing: 'easeInOutExpo',
    speed:  1000,
    before:  slideUp, 
    after:   slideDown,
    startingSlide: 1
});

В настоящее время и моя функция onBefore, и функция следующего слайда анимируются одновременно.

Я также пытался создать следующие ссылки вне плагина: 

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

но это приводит к некоторому причудливому поведению, когда фоновые изображения слайдов изменяются перед анимацией, а функция работает только при первом щелчке: /

Ответы [ 2 ]

1 голос
/ 11 марта 2011

Кажется, что у функции "next" нет возможности ждать завершения вашего "before" с помощью методов плагина.

Однако, углубившись в код cycle.js, вы можете отложить следующие функции в этих строках: 

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();
});

Приблизительная строка 860 - (не точно, поскольку я добавил некоторые заметки / комментарии / настройки через код). Здесь я добавил .delay (800), который дает желаемый эффект.

0 голосов
/ 06 апреля 2011

Разве вы не можете просто вызвать отдельную функцию, которая ожидает? 

$('#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;
    }
  }
};

Приведенный выше код не проверен.

Я получил упомянутые выше переменные,

текущий элемент слайда, "curr" и индекс текущего слайда, "opts.currSlide"

из справочника опций цикла jquery - http://jquery.malsup.com/cycle/options.html и с использованием "console.log (opts)"чтобы узнать, что внутри opts через мою консоль Google Chrome.

Надеюсь, это поможет.

...