Prevent new CSS3 & jQuery animation until previous one has completed -

Prevent new CSS3 & jQuery animation until previous one has completed -

what i'm doing:

i'm utilizing jquery plugin called transit take care of 3d animations in responsive slideshow.

question:

everything works great until nail "next" or "previous" quickly- before animation has completed. i've seen few similar questions, answers don't seem work me since these technically css animations. how can disable ability navigate until animation complete?

i should note using keypress now, have buttons click in final version. method should work if there few different ways engage slideshow.

working illustration › jsfiddle

stripped code:

$(document).ready(function () { // define function play forwards function playforward() { // stuff } // define function play reverse function playreverse() { // stuff } // animate on keypress $(document).keydown(function (e) { var keycode = e.keycode || e.which, arrow = { left: 37, up: 38, right: 39, down: 40 }, $status = $('#status'); switch (keycode) { case arrow.left: playreverse(); break; case arrow.up: // break; case arrow.right: playforward(); break; case arrow.down: // break; } }); });

set variable maintain track of animation process. when trigger animation on keypress set variable true;

var istransitioning = true;

at top of play functions add together line observe if it's in transition if don't execute function.

if ( istransitioning ) { homecoming false; }

detect end of transition how observe transition end without javascript library? , set variable false.

jquery css3 jquery-animate css-transitions