JQuery в JavaScript для цикла не работает

0

Я пытаюсь запустить jQuery внутри цикла for следующим образом:

var frameNumber = 15; // How many frames are in your animation

for(var i = 1; i < frameNumber + 1; i++){
    var flipDelay = i * 100;

    $('.flipbook').delay(flipDelay).addClass('flipbook-' + i);
}

Я пытаюсь получить эквивалент этого, но с большей гибкостью, поэтому я могу изменить количество кадров, которые я использую:

$(function(){
    setTimeout(function(){ $(".flipbook").addClass("flipbook-1") }, 100 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-2") }, 200 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-3") }, 300 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-4") }, 400 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-5") }, 500 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-6") }, 600 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-7") }, 700 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-8") }, 800 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-9") }, 900 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-10") }, 1000 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-11") }, 1100 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-12") }, 1200 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-13") }, 1300 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-14") }, 1400 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-15") }, 1500 );
});

Классы определены в таблице стилей CSS, и каждый класс имеет другой фон, применяемый к нему. Мне просто нужно jQuery/JS пропустить их до тех пор, пока не будет достигнут последний кадр.

EDIT: Это не flipbook-01 и flipbook-1, которые мешают мне заставить это работать. Извините за эту путаницу.

EDIT: мне нужно, чтобы мой div выглядел так, как только функция запускается:

<div class="flipbook flipbook-1 flipbook-2 flipbook-3 flipbook-4 ... flipbook-15"></div>
  • 0
    'flipbook-' + i = flipbook1, а не flipbook01.
  • 0
    Я уже изменил свои имена изображений. Я просто скопировал этот кусок кода из старого файла. Так что это круто.
Показать ещё 1 комментарий
Теги:
loops
animation

4 ответа

1
Лучший ответ

Вы неправильно используете функцию delay(). jQuery будет только помещать эффекты вне коробки (например, fadeIn() или slideUp()), а не такие вещи, как show(), hide() или addClass().

Пример нерабочей delay() с addClass(): http://jsbin.com/hayay/4/

Вместо этого вы должны просто использовать setTimeout как упоминали другие. Я бы рекомендовал рекурсивный подход, вместо того, for цикл for:

var frameNumber = 15;
showFrame(1);
function showFrame(i) {
  $('.flipbook').addClass('flipbook-' + i);
  if (i < frameNumber) {
    setTimeout(function() { showFrame(i+1); }, 100);
  }
}
Поделиться
  • 0
    Это именно та информация, которая мне нужна. Спасибо :)
1

Попробуй это:

addClass('flipbook-' + (i<10?("0"+i):i));

Это добавит недостающий ноль для я <10. И про задержку - это не сработает с addClass. Вы должны придерживаться опции setTimeout.

Поделиться
  • 2
    Не решает проблему задержки вообще.
  • 0
    обновлено. Но он уже попробовал setTimeout, что является ответом, поскольку задержка не будет работать с методом addClass.
Показать ещё 1 комментарий
0

Как уже было сказано, метод addClass() является непосредственным вызовом метода. По умолчанию он не выполняет очередь анимации, необходимую для работы. delay().

Здесь интересное решение, с которым я столкнулся, позволяет вам сделать какой-либо jQuery-метод работой через очередь анимации, и, таким образом, вы можете упорядочить методы через встроенную очередь анимации, можете использовать .delay() для управления синхронизацией, можете пересекаться с другими анимациями, и т.д...

// generic method to allow you to run any jQuery method through the animation queue
// so they will be serialized with other asynchronous animation methods
// such as .delay(), .animate(), .slideUp(), etc...
jQuery.fn.queueMethod = function(methodName /* arg1, arg2, ... */) {
    var self = this;
    var args = Array.prototype.slice.call(arguments, 1);
    self.queue(function(next) {
        self[methodName].apply(self, args);
        next();
    })
    return this;
}    

var frameNumber = 15; // How many frames are in your animation

for (var i = 1; i <= frameNumber; i++) {
    $('.flipbook').delay(100).queueMethod("addClass", "flipbook-" + i);
}

Это будет запускать каждый метод addClass, равный 100 мс.

Несколько рабочих примеров несколько разных способов сделать это: http://jsfiddle.net/jfriend00/38BbM/

Поделиться
0

Fiddle Demo

var frameNumber = 15;
for (var i = 1; i < frameNumber + 1; i++) {
    (function (x) {
        setTimeout(function () {
            $('.flipbook').addClass('flipbook-' + x);
            console.log(x);
        }, x * 100)
    })(i)
}
Поделиться
  • 1
    ('flipbook-'+ i) будет flipbook1 а не flipbook01 как хочет OP
  • 0
    @asprin обновлен.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню