Clever Geek Handbook

JQuery synchronous animation trigger

I am writing a game in jQuery and I am a bit stuck. I would like to activate at the drawing stage a sequence of webkit animations synchronously, with a 1 second delay. I am attaching the relevant code (which is not working correctly):

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);
  };
};
Run codeHide result


CSS: 

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


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="" />
Run codeHide result


EDIT: Sorry for the ambiguity of the previous question. The problem is that the above code seems to trigger the animation in a rather random way. Sometimes they work right sometimes not at all.

EDIT 2: SOLVES. Will update the solution in a few days.

+3


source to share


2 answers


You can use an option animation-delay

in CSS with a relative number that can be put and taken from the data attribute.



<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)})
+1


source


It looks like part of your problem is that you are actually calling the runMe function instead of the queue to run it:

This will immediately call runMe

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


This will call a function that will later call runMe:

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


source






More articles:


All Articles