CODEWITHSUNDEEP
javascriptjquery
sMilbz
sMilbz

Reputation: 951

Stop animation for 3 seconds

I am creating a whack-a-mole style game where a sum is given and numbers animate from the bottom of the container to the top. The aim of the game is to click the correct answer to the sum and collect as many correct answers as possible.

I have also added a couple of extra icons to make the game more fun. One of the icons is a snowflake which freezes the timer and the icons for 3 seconds.

At the moment there isn't a problem with stopping the clock for 3 seconds - this part all works fine. The problem I am having is stopping the numbers and other icons for 3 seconds.

I have tried this..

    $(".character").click(clickThrottled(function () {
        if ($(this).hasClass("freeze")) { 
            $(this).effect("explode", 400);
            $('.character').stop(true);
            window.clearInterval(countdown);
            window.setTimeout(function() {
            countdown = window.setInterval(timer, 1000);
        }, 3000);
    }
}));

But all it does is stop the icons permanently. I have also tried butting the stop() in the setTimeout function, but this doesn't work either. Can someone show me where I am going wrong?

Fiddle: http://jsfiddle.net/pUwKb/52/

Upvotes: 2

Views: 288

Answers (1)

user1333371
user1333371

Reputation: 618

stop will clear all animations from the queue. Try adding back the animation like so:

$(".character").click(clickThrottled(function () {
    if ($(this).hasClass("freeze")) { 
        $(this).effect("explode", 400);
        $('.character').stop(true).delay('3000').animate({
          'top': '-100px'
        }, 2000).fadeOut(1000);
        window.clearInterval(countdown);
        window.setTimeout(function() {
        countdown = window.setInterval(timer, 1000);
    }, 3000);
}

Upvotes: 1

Related Questions