Действие во время анимации jQuery?

Question

[aleksandrozz]

Здравствуйте! Подскажите пожалуйста как лучше сделать. Есть каруселька, которая, в данном случае, должна прокрутиться на 500px. Видимость ограничена первыми 5 элементами, где центральный 300*300, следующий и предыдущий от него 200*200, все остальные 100*100. Центральный имеет класс large, по бокам от центрального middle. Надо чтобы при прокрутке классы тоже двигались на следующие элементы, сейчас это работает, но с опозданием, потому что присвоение классов происходит после анимации. Как сделать чтобы присвоение классов следующим элементам было во время анимации?

Для наглядности: https://s.mail.ru/9isi/UWMbPwcAj

Вот кусок кода где это происходит:

var offset = 100;

while (offset < 500) {
    carousel.animate({ left : "-" + offset + "px"}, speed,
        function() {
            elem_m.removeClass('middle');
            elem_l.removeClass('large');

            elem_m = elem_m.next();
            elem_l = elem_l.next();

            elem_m.addClass('middle');
            elem_l.addClass('large');
    });

    offset += 100;
}

Answer 1

[Андрей Гончаров]

У тебя функция передвижения классов в коллбэке animate - вот и отрабатывает после завершения. Высунь ее наружу из animate

Comments

[aleksandrozz]

Ага, все верно, иначе она у меня не работает. Если я вытащу функцию за пределы animate, тогда классы сразу встают в конец цикла, т.е. на завершающие элементы. Я не знаю почему так происходит, может я что-то не так делаю?

[Андрей Гончаров]

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

Answer 2

[MrTimon]

Ввможете задейсвовать css анимацию по увеличению/уменьшению размеров скорость которой будет соответствовать стокорости полной js анимации. Здесь Пример анимации. обратите внимание на строку

transition: width 1s linear, height 1s linear;

там в секундах указано скорость анимации. А в js Я просто изменяю класс. Тоесть вам не нужно делать это в цикле. Вы просто изменяете классы для элементов и запускаете анимацию карусели. Должно все получиться в лучшем виде.

Есть и другой более сложный вариант. В js ф-ции animate есть параметр step это ф-ция отвечающая за один крок анимации. Вот пример з дока:

$( "li" ).animate({
  opacity: .5,
  height: "50%"
}, {
  step: function( now, fx ) {
    var data = fx.elem.id + " " + fx.prop + ": " + now;
    $( "body" ).append( "<div>" + data + "</div>" );
  }
});

Тоесть Вы можете прописать в здесь все изменения, которые должны происходить с Вашем блоком. Ну там сдвиг влево/вправо ну и увлечения/уменьшения некоторых элементов. И в конце анимации поменять классы.

Comments

[aleksandrozz]

Не совсем то, нужно именно по несколько элементов сразу прокручивать. Без цикла я что-то не знаю как сделать..

[aleksandrozz]

А вот со степом сейчас посмотрю, спасибо)

[MrTimon]

aleksandrozz: Хм. не до конца понимаю для чего вам там цикл? Вот я доделал свой пример с анимацией. Разве вам не такой эффект нужен?

[aleksandrozz]

MrTimon: Это не как карусель работать должно, а как рулетка, т.е. я нажал на кнопку и она крутится какое-то время