What you want is to prevent the dreaded stacking of click events. There are different ways of handling that, but in basic they all come down in setting a Boolean.
In your example I have set a data() tag to your #choices container starting with the value false. Upon click I change the Boolean value to true. Basically if processing=false I execute the code in the click callback.
$("#choices").data('processing', false);
$("#rock").click(function () {
if (!$(this).parent().data('processing')) {
$(this).parent().data('processing', true);
user = roPaSc[0];
gamePlay();
}
});
$("#paper").click(function () {
if (!$(this).parent().data('processing')) {
$(this).parent().data('processing', true);
user = roPaSc[1];
gamePlay();
}
});
$("#scissors").click(function () {
if (!$(this).parent().data('processing')) {
$(this).parent().data('processing', true);
user = roPaSc[2];
gamePlay();
}
});
After your animation, the boolean value needs to be reset . I do this in the openEyes function in the "else-statement".
else {
$("#you").attr({
'src': user
});
$("#computer").attr({
'src': com
});
$("#choices").data('processing', false);
}
Here is the adjusted fiddle of "rock-paper-scissors": http://jsfiddle.net/gpxxn/2/