Vertraging tussen uitvoering van Jquery-functies

Er zijn 2 knoppen op mijn pagina: #signin en #signup . Klikfuncties voor hen zien eruit als code hieronder. Het probleem is, als je er continu op klikt, er grote vertraging optreedt tussen de uitvoering van de functies. Is er hoe dan ook om ze tegelijkertijd uit te voeren?

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++;
    });

U kunt de code hier in actie zien: http://tural.no-ip.org . Klik snel en continu op de knop en je ziet wat ik bedoel. Extern js-bestand: first.js.

0
Ik zou erop vertrouwen dat CSS automatisch de grootte aanpast.
toegevoegd de auteur Blender, de bron
geprobeerd met CSS ook. animaties stoppen 1-2 seconden terwijl CSS zichzelf "herconfigureert"
toegevoegd de auteur Tural Ali, de bron

1 antwoord

Gebruik de .stop() -methode voordat u nog een fade toevoegt functie. Gebruik:

signin_f.stop(true, true).fadeIn(1200);
//First argument true = Remove queued animations as well
//Second argument true = Immediately finish the current animation
3
toegevoegd
probeerde geen succes. tural.no-ip.org . Klik snel en continu op de knop en je ziet wat ik bedoel. Extern js-bestand: first.js.
toegevoegd de auteur Tural Ali, de bron
Voeg ook .stop (true, true) toe vóór anim() . In plaats daarvan kunt u aan het begin van elke gebeurtenislistener signin_f.stop (true, true) toevoegen.
toegevoegd de auteur Rob W, de bron