jQuery синхронный анимационный триггер

Question

Я пишу игру в jQuery, и я немного застрял. Я хотел бы активировать на этапе рисования последовательность анимаций webkit синхронно, с задержкой в ​​1 секунду. Я придаю соответствующий код (который не работает должным образом) .:

JQuery:

var colour_sequence = []; 
 
var drawGame = function() { 
 
    for (var index = 0; index < colour_sequence.length; index++) { 
 
    $(queue_selector).queue("syncFnQueue", runMe(toggle_tile, colour_sequence[index], queue_selector)); 
 
    } 
 
    var current_tile = chooseRandomTileId(); 
 
    $(queue_selector).queue("syncFnQueue", runMe(toggle_tile, current_tile, queue_selector)); 
 
    $(queue_selector).dequeue("syncFnQueue"); 
 

 
    colour_sequence.push(current_tile); 
 
} 
 

 

 
var toggle_tile = function(element) { 
 
    $(element).toggleClass(animated_img_class); 
 
    $(element).toggleClass(simple_img_class); 
 
}; 
 

 
var runMe = function(fn, e, selec) { 
 
    return function() { 
 
    fn(e); 
 
    setTimeout(function() { 
 
     $(selec).dequeue("syncFnQueue"); 
 
    }, 1000); 
 
    }; 
 
};

CSS:

.game-img { 
 
    opacity: 1; 
 
} 
 
.game-img-animated { 
 
    -webkit-animation: grow-shrink 1s ease-in-out; 
 
    animation: grow-shrink 1s ease-in-out; 
 
}

HTML:

<img id="red-brain" class="img-responsive game-img" src="images/brain_red.png" alt="" /> 
 
<img id="yellow-brain" class="img-responsive game-img" src="images/brain_yellow.png" alt="" /> 
 
<img id="green-brain" class="img-responsive game-img" src="images/brain_green.png" alt="" /> 
 
<img id="blue-brain" class="img-responsive game-img" src="images/brain_blue.png" alt="" />

EDIT: Извините за двусмысленность предыдущего вопроса. Проблема в том, что приведенный выше код, похоже, вызывает анимацию довольно случайным образом. Иногда они срабатывают правильно иногда совсем не.

EDIT 2: РЕШЕН. Будет обновляться с помощью решения через несколько дней.

Answer 1

Вы можете использовать опцию animation-delay в CSS с относительным числом, которое вы можете поместить и взять из атрибута data.

<img id="red-brain" class="img-responsive game-img" data-delay=".3s" src="images/brain_red.png" alt="" /> 

$(this).css({"animation-delay" : $(this).attr(data-delay)}) 

Answer 2

Это выглядит как часть вашей проблемы вы на самом деле вызов функции Runme вместо очередей его запустить:

Это будет вызывать Runme немедленно

$(queue_selector).queue("syncFnQueue", 
    runMe(toggle_tile, colour_sequence[index], queue_selector)); 

Эти будет стоять в очереди функция, которая позже вызовет runMe:

$(queue_selector).queue("syncFnQueue", 
function(){ runMe(toggle_tile, colour_sequence[index], queue_selector)});