CODEWITHSUNDEEP
javascriptjqueryanimationjquery-animate
Milo-J
Milo-J

Reputation: 1108

Run 2 animations at once

I am creating a shooting game for children where numbers come from bottom to top and they have to click on the right one that matches the question.

I currently use this code to start the numbers moving from bottom to top

var bWidth = $('#' + id).width();
var bHeight = $('#' + id).css('top', '400px').fadeIn(1000).animate({
    'top': '-100px'
}, 7000).fadeOut(1000);

The thing is when the user gets the answer correct I then use another animation to show it is correct, and the same for wrong answers.

$(".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();
        }
    }
});

My problem is that when I click the numbers there is a big pause before the second animation kicks in, and sometimes doesn't even work at all.

I was wondering if someone could show me a way around this so that it runs smoothly. Thanks!

Here is a fiddle to help: http://jsfiddle.net/pUwKb/19/

Upvotes: 2

Views: 168

Answers (1)

luuksen
luuksen

Reputation: 1365

Use queue: false in your animate() options:

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

Upvotes: 2

Related Questions