我正在为孩子们创建一个射击游戏,其中数字从下到上,他们必须点击与问题匹配的正确的那个。
我目前使用此代码开始从底部到顶部移动的数字
var bWidth = $('#' + id).width();
var bHeight = $('#' + id).css('top', '400px').fadeIn(1000).animate({
'top': '-100px'
}, 7000).fadeOut(1000);
问题是当用户得到正确答案时,我会使用另一个动画来显示它是正确的,错误答案也是如此。
$(".character").click(function () {
$(this).stop();
if ($(this).hasClass("clock")) {
if ($(this).hasClass("up")) {
$(this).effect("explode", 300);
count += 5;
} else if ($(this).hasClass("down")) {
$(this).effect("bounce", {
times: 2,
direction: 'left'
}, 300, function() {
$(this).slideUp('fast');
});
count -= 5;
}
$('#timer').text(count);
} else {
if ($(this).hasClass("wrong")) {
$(this).effect("bounce", {
times: 2,
direction: 'left'
}, 300, function() {
$(this).slideUp('fast');
});
miss++;
attempted++;
$("#miss").html("Wrong: " + miss);
} else {
$(this).effect("explode", 300);
hit++;
attempted++;
$("#hit").html("Right: " + hit);
correctlabels();
}
}
});
我的问题是,当我单击数字时,在第二个动画开始之前会有一个很大的停顿,有时甚至根本不起作用。
我想知道是否有人可以向我展示解决此问题的方法,以便它顺利运行。谢谢!
这是一个帮助的小提琴:http: //jsfiddle.net/pUwKb/19/