2

我正在为孩子们创建一个射击游戏,其中数字从下到上,他们必须点击与问题匹配的正确的那个。

我目前使用此代码开始从底部到顶部移动的数字

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/

4

1 回答 1

2

queue: false在您的 animate() 选项中使用:

http://api.jquery.com/animate/

于 2013-01-03T10:36:00.647 回答