Issue with Animation build up

[Shadowing]

I'm having issue that is about to drive me insane

made a jsfiddle example

 

If you hit the start button slowly over and over again the images will open up like doors but if you really spam hit the button crazy fast they will disappear.

 

I've tried checking if animated, tried testing where its current margin location is at and tried using stop()

wondering if anyone here can figure this out.

 

http://jsfiddle.net/uGHe4/43/

Edited September 5, 2013 by Shadowing

[davej]

Do you mean hitting the start button repeatedly? Why don't you simply disable the button every time it is hit for a period of several seconds?

[Shadowing]

Ya hitting the start button really fast. This was just a example. Being used in Stargate System Lords the game. There is about 50 buttons that trip this function. Preventing the animation only griping so often is plan b but will kinda ruin the flow of the gameHttp://www.systemlords.com

Edited September 6, 2013 by Shadowing

[Ingolme]

I think that the problem comes from the fact that in some particular instants the images aren't animated (between one movement and the next) and if the start button is clicked in that instant it will start more animations.

You're checking to see if the pieces are animated:

if (case1.is(':animated') || case2.is(':animated') || case3.is(':animated') || case4.is(':animated')) {return;}

I'd solve this by setting a global variable, and setting it to while the animation is going, then checking the variable when Start is pressed.

 

var animated = false; function endAnimation() { animated = false; }function case_move() {    var case1 = $('img#case1'), case2 = $('img#case2'), case3 = $('img#case3'), case4 = $('img#case4');    var hidden_case = $('div#hide_case');     // Return if the object is being animated    if (animated) {        return;    }        //reset    case1.css({"margin-left":"52px", "margin-top":"2px"});    case2.css({"margin-left":"148px", "margin-top":"2px"});    case3.css({"margin-left":"240px", "margin-top":"2px"});    case4.css({"margin-left":"336px", "margin-top":"2px"});     // The object is being animated    animated = true;    // Set animated to false when the animation ends I assume it ends at 700 but set this value to the correct time    setTimeout(endAnimation, 700);    move_object(0, case2, '0px', '100px' ,'0px' , '0px', 100, 'linear');    move_object(0, case3, '0px', '100px' ,'0px' , '0px', 100, 'linear');    move_object(100, case2, '-68px', '0px' ,'0px' , '0px', 100, 'linear');    move_object(100, case3, '68px', '0px' ,'0px' , '0px', 100, 'linear');     move_object(300, case2, '0px', '100px' ,'0px' , '0px', 100, 'linear');    move_object(300, case3, '0px', '100px' ,'0px' , '0px', 100, 'linear');    move_object(300, case1, '0px', '100px' ,'0px' , '0px', 100, 'linear');    move_object(300, case4, '0px', '100px' ,'0px' , '0px', 100, 'linear');                                move_object(500, case2, '-110px', '0px' ,'0px' , '0px', 100, 'linear');    move_object(500, case1, '-110px', '0px' ,'0px' , '0px', 100, 'linear');    move_object(500, case3, '110px', '0px' ,'0px' , '0px', 100, 'linear');    move_object(500, case4, '110px', '0px' ,'0px' , '0px', 100, 'linear');     }

[Shadowing]

Thanks Ingolme

Ya that's the only way I could fix the issue making a switch like that.

I think I will just use this approach cause it still feels good. Plus the doors open so fast anyways so there won't be any confusion against the user if they did spam click it.

 

 

Thanks guy. and thanks davej for your responce