CSS Transitions not finishing before next? - css

Question

Fiddle: http://jsfiddle.net/wczTW/1/
Basically, I have a set of elements that I'm moving up and down. Think "Cover Flow" except vertical (Yuck, I know). It works great unless you hit up or down really quick, in which case it seems that the CSS transition starts before the last one finished and they begin to get too close together. I'm not even 100% sure that's what's going on, but if you play with the fiddle above for a couple seconds you should see what I'm talking about.
Relevant CSS:
.game {
position: absolute;
width: 150px;
height: 100px;
left: 200px;
margin-left: -125px;
background-color: gray;
border: 1px solid white;
-webkit-transition: all .2s ease-in-out;
-webkit-transform: scale(1);
overflow: hidden;
z-index: 10;
}
.selected {
transform-origin: 0 0;
border: 1px solid green;
-webkit-transition: all .2s ease-in-out;
-webkit-transform: scale(1.25);
z-index: 100;
}
Relevant Javascript:
$(document).ready(function () {
keyDown = false;
lTop = ($(window).height() / 2) - 50;
$('.game').each(function () {
$(this).css('top', lTop);
lTop += 120;
});
});
$(document).keydown(function (e) {
if (!keyDown) {
if (e.keyCode == 40) { //down
var selected = $('.selected');
var next = selected.next()
if (next.length) {
selected.removeClass('selected');
next.addClass('selected');
$('.game').css('top', function (i, v) {
return (parseFloat(v) - 120) + 'px';
});
}
keyDown = true;
} else if (e.keyCode == 38) { //up
var selected = $('.selected');
var next = selected.prev()
if (next.length) {
selected.removeClass('selected');
next.addClass('selected');
$('.game').css('top', function (i, v) {
return (parseFloat(v) + 120) + 'px';
});
}
keyDown = true;
}
}
});
$(document).keyup(function (e) {
keyDown = false;
});
Is there a simple way to queue CSS transitions? Or block input until the current transition is done?
edit: I think I would much prefer just aborting the animation and moving it immediately, if possible. The two options above would be bad user experience I think.

Answer 1

What's happening is that the keypresses are happening before the top CSS value has updated to its new value, so the v variable is not what you're expecting. One way to fix would be to use setTimeout() to prevent keypresses until the animation is done, but the better way would be to use another way to calculate the top value. I'm putting together a fiddle for you.
FIDDLE HERE http://jsfiddle.net/wczTW/2/
Here's your new javascript:
var currentTop, lTop, keyDown;
$(document).ready(function () {
keyDown = false;
currentTop = lTop = ($(window).height() / 2) - 50;
console.log(lTop);
$('.game').each(function () {
$(this).css('top', lTop);
lTop += 120;
});
});
var index = 0;
$(document).keydown(function (e) {
var selected = $('.selected');
if (!keyDown) {
if (e.keyCode == 40) { //down
var next = selected.next()
if (next.length) {
index++;
selected.removeClass('selected');
next.addClass('selected');
$('.game').css('top', function (i, v) {
return ((i * 120) - (index * 120) + currentTop) + 'px';
});
}
keyDown = true;
} else if (e.keyCode == 38) { //up
var next = selected.prev()
if (next.length) {
index--;
selected.removeClass('selected');
next.addClass('selected');
$('.game').css('top', function (i, v) {
return ((i * 120) - (index * 120) + currentTop) + 'px';
});
}
keyDown = true;
}
}
});
$(document).keyup(function (e) {
keyDown = false;
});
So what I changed is:
Added a new variable currentTop that is the value that we always want the .selected item to be at
Changed the $('.game').css() so that it doesn't use v to calculate the new top, it now calculates it based on the i variable (which is the index of that item) and a new index variable
Added the index variable, which keeps track of which index is currently selected. This works using index++ and index-- on keypress.