Delay between Jquery functions execution

Question

There are 2 buttons on my page: #signin and #signup. Click functions for them look like code below. The problem is, when you continously click on them, appearing big delay between functions' execution. Is there anyway to execute them at the same time?

var counter = 0,signin = $("#signin"), signup = $("#signup"), signin_f = $("#signin_form"), holder = $("#holder"), signup_f = $("#signup_form"), f_container = $("#form_container"); 
$(".button").click(function () {
        if (counter === 0) {
            signin.removeClass('default_radius').addClass('right_radius');
            signup.removeClass('default_radius').addClass('left_radius');
            $("#first").animate({
                marginTop: "-=150px",
            }, 500);
        }

    });

    $("#signup").click(function () {
        if (counter === 0) {
           holder.addClass('red_border').height(275).slideDown("slow");
           f_container.show();
           signup_f.fadeIn(1200);
        } else {
           holder.animate({height:"275"},1000).switchClass( "green_border", "red_border", 1000 );
           signin_f.fadeOut(500);      
           f_container.animate({height:"260"},1000);
           signup_f.fadeIn(1000);
        }
        counter++;
    });

    $("#signin").click(function () {
        if (counter === 0) {
            holder.addClass('green_border').height(125).slideDown("slow");
            f_container.show();
            signin_f.fadeIn(1200);
        } else {
           holder.animate({height:"125"},1000).switchClass( "red_border", "green_border", 500 );
           signup_f.fadeOut(500);                        
           f_container.animate({height:"110"},1000);           
           signin_f.fadeIn(1200);

        }

        counter++;
    });

You can see the code in action here: http://tural.no-ip.org . Fast and continuously click on button and you'll se what i'm talking about. External js file: first.js.

tried with css too. animations stops 1-2 sec while css "reconfiguring" itself — Tural Ali
– Tural Ali, Commented Nov 12, 2011 at 21:02

Rob W · Accepted Answer · 2011-11-12 21:02:26Z

3

Use the .stop() method before adding another fade function. Usage:

signin_f.stop(true, true).fadeIn(1200);
//First argument true = Remove queued animations as well
//Second argument true = Immediately finish the current animation

answered Nov 12, 2011 at 21:02

Rob W

350k87 gold badges811 silver badges683 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tural Ali Over a year ago

tried no success. tural.no-ip.org . Fast and continuously click on button and you'll se what i'm talking about. External js file: first.js.

Rob W Over a year ago

Also add .stop(true, true) before animate(). Instead, you can also add signin_f.stop(true, true) at the beginning of each event listener.

Collectives™ on Stack Overflow

Delay between Jquery functions execution

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related