clique rapide, fadein

remy76690
Javascript

Salut tout le monde,
il est vrais que mon titre n'est pas super ^^

Bon, je vous explique, j'ai fait se code :

$('#change-form').click(function(){
        var actif = $(this).attr('data-actif');
        if(actif == "connection"){
            $(this).empty().append("Connexion");
            $(this).attr('data-actif', 'register');
            $('#connection-form').fadeOut('1000', function(){
               $('#register-form').fadeIn('1000');
            });
        }
        else
        {
            $(this).empty().append("Inscription");
            $(this).attr('data-actif', 'connection');
            $('#register-form').fadeOut('1000', function(){
                $('#connection-form').fadeIn('1000');
            });
        }
    });

Le problème, si la personne clique rapidement sur l'icone, j'ai les deux formulaire qui s'affiche :'(

Dans la logique des choses, il doit afficher qu'un seul, mais si on spam le bouton, sa n'a pas le temps.

Si quelqu'un à une idée pour évité sa.

Cordialement;

8 réponses

Jordan Taisne
Réponse acceptée

Et la c'est bon ?

function changeForm () {
    var $this = $(this),
        actif = $this.data('actif'),
        $buttons = $('button.change-form');

    // active le bouton et désactive l'event
    $buttons.removeAttr('disabled').off('click.change');

    // actions spécifiques
    if(actif == 'connection') {
        $this.html('Inscription').data('actif', 'register');
    } else if (actif == 'register') {
        $this.html('Connexion').data('actif', 'connection');
    } else { // forgot
        $buttons.attr('disabled', 'disabled');
    }

    // cache le formulaire visible
    $('#forgot-form:visible,#connection-form:visible,#register-form:visible').fadeOut(1000, function(){
        // affiche le formulaire suivant
        $('#' + actif + '-form').fadeIn(1000, function(){
            // active l'event 
            $buttons.on('click.change', changeForm);
        });
    });
}
$('button.change-form').on('click.change', changeForm);
betaWeb

Salut,

Tu peux essayer de unbinder le click pendant l'animation:

$('#change-form').click(function(){
        var self = $(this),
            regForm = $('#connection-form'),
            connForm =  $('#connection-form'),
            actif = self.attr('data-actif') || self.data('actif');

        /* On désactive le clic temporairement */
        self.off('click');

        if("connection" = actif){
           self.empty().attr('data-actif', 'register').append("Connexion");
            connForm.fadeOut('250', function(){
               regForm.fadeIn('400');
            });
        } else {
            self.empty().attr('data-actif', 'connection').append("Inscription");
            regForm.fadeOut('250', function(){
                connForm.fadeIn('400');
            });
        }
        self.on('click');
});
remy76690
Auteur

Ah tu une idée pour rendre se code encore plus petit :

$('.change-form').attr('disabled', false);

    $('.change-form').click(function(){
        var change = $(this);
        var actif = $(this).attr('data-actif');
        console.log(actif);
        if(actif == "connection"){
            $('.change-form').attr('disabled', false);
            $(this).empty().append("Connexion");
            $(this).attr('data-actif', 'register');

            if($('#forgot-password').is(':visible')) {
                $('#forgot-password').fadeOut('1000', function () {
                    $('#register-form').fadeIn('1000');
                });
            }
            else{
                $('#connection-form').fadeOut('1000', function(){
                    $('#register-form').fadeIn('1000');
                });
            }
        }
        else if(actif == "register")
        {
            $('.change-form').attr('disabled', false);
            $(this).empty().append("Inscription");
            $(this).attr('data-actif', 'connection');
            if($('#forgot-password').is(':visible')) {
                $('#forgot-password').fadeOut('1000', function () {
                    $('#connection-form').fadeIn('1000');
                });
            }
            else{
                $('#register-form').fadeOut('1000', function(){
                    $('#connection-form').fadeIn('1000');
                });
            }
        }
        else if(actif == "forgot"){
            $(this).attr('disabled', true);
            if($('#register-form').is(":visible")){
                $('#register-form').fadeOut('1000', function(){
                    $('#forgot-password').fadeIn('1000');
                });
            }
            else if($('#connection-form').is(":visible")) {
                $('#connection-form').fadeOut('1000', function(){
                    $('#forgot-password').fadeIn('1000');
                });
            }
        }
    });

Enfaite, j'ai rajouté le bouton pour mot de passe perdu, mais je trouve mon code trop long.
Et avec se long code, je ne vois pas trop comment faire le unbinder

Jordan Taisne

Hello,
Je pense que ca peut etre fait comme ca : (DRY)

function changeForm () {
    var $this = $(this),
        actif = $this.data('actif');

    // active le bouton et désactive l'event
    $this.attr('disabled', false).off('click.change');

    // actions spécifiques
    if(actif == 'connection') {
        $this.html('Connexion').data('actif', 'register');
    } else if (actif == 'register') {
        $this.html('Inscription').data('actif', 'connection');
    } else { // forgot
        $this.attr('disabled', true);
    }

    // cache le formulaire visible
    $('#forgot-password,#connection-form,#register-form').fadeOut(1000, function(){
        // affiche le formulaire suivant
        $('#' + actif + '-form').fadeIn(1000, function(){
            // active l'event 
            $this.on('click.change', changeForm);
        });
    });
}
$('.change-form').on('click.change', changeForm);

en espérant que ca te soit utile

remy76690
Auteur

Alors ton code est pas mal, mais après l'avoir tester j'ai eu la surprise de pas réussir a le fonctionner ^^
J'ai donc modifier un peu :

function changeForm () {
        var $this = $(this),
            actif = $this.attr('data-actif');

            $this.unbind('click');

        // active le bouton et désactive l'event
        //$this.attr('disabled', false).off('click.change');

        // actions spécifiques
        if(actif == 'connection') {
            $this.html('Inscription').attr('data-actif', 'register');
        } else if (actif == 'register') {
            $this.html('Connexion').attr('data-actif', 'connection');
        } else { // forgot
            //$this.attr('disabled', true);
        }

        // cache le formulaire visible
        $('#forgot-form,#connection-form,#register-form').fadeOut(100, function(){
            // affiche le formulaire suivant
            $('#' + actif + '-form').fadeIn(100, function(){
                // active l'event
                //$this.on('click.change', changeForm);

            });
        });
    }

    $('.change-form').on('click.change', changeForm);

J'ai réusie à desactiver le click sur le bouton mais pas le réactiver, j'ai essayer avec bind.

Et voici comment sont mes boutons :

<li><button class="btn btn-default change-form" data-actif="forgot" style="margin-right: 5px;">Mot de passe oublié ?</button></li>
                <li><button class="btn btn-primary change-form" data-actif="register">Inscription</button></li>

Car au début, il n'etait pas comme sa.

Jordan Taisne

Ah tu as plusieurs boutons, j'ai ajouter ca que sur le bouton ou tu clique. Avec les petits changements ca devrait aller.

function changeForm () {
    var $this = $(this),
        actif = $this.data('actif'),
        $buttons = $('button.change-form');

    // active le bouton et désactive l'event
    $buttons.removeAttr('disabled').off('click.change');

    // actions spécifiques
    if(actif == 'connection') {
        $this.html('Connexion').data('actif', 'register');
    } else if (actif == 'register') {
        $this.html('Inscription').data('actif', 'connection');
    } else { // forgot
        $buttons.attr('disabled', 'disabled');
    }

    // cache le formulaire visible
    $('#forgot-password,#connection-form,#register-form').fadeOut(1000, function(){
        // affiche le formulaire suivant
        $('#' + actif + '-form').fadeIn(1000, function(){
            // active l'event 
            $buttons.on('click.change', changeForm);
        });
    });
}
$('button.change-form').on('click.change', changeForm);
remy76690
Auteur

Je ne comprend pas pourquoi ton code ne fonctionne pas...
J'ai mes deux bouton : 

<li><button class="btn btn-default change-form" data-actif="forgot" style="margin-right: 5px;">Mot de passe oublié ?</button></li>
                <li><button class="btn btn-primary change-form" data-actif="register">Inscription</button></li>

Ensuite mes form :

<form id="connection-form" action="">
            <h2 class="title">Connexion</h2>
            <div class="formulGlob">
                <div class="remember">
                    <a title="Se souvenir de moi" style="display:block;top: 0;bottom: 0;left: 0;right: 0;position:absolute">
                        <span class="logon-remember fa fa-floppy-o"></span>
                    </a>
                    <input type="checkbox" id="test1" />
                </div>
                <div class="globCone">
                    <span class="fa fa-user inputUserIcon" style="color: #000000;"></span>
                    <input type="text" class="user-connect" placeholder="ursername"/>
                </div>
                <div class="globCone password">
                    <span class="fa fa-key inputPassIcon" style="color: #000000;"></span>
                    <input type="password" class="pass-connect" placeholder="password"/>
                </div>
            </div>
            <button class="submit-regist">
                <span class="fa fa-sign-in"></span> Connexion
            </button>
        </form>
        <form id="register-form" style="display: none;" action="">
            <h2 class="title">Inscription</h2>
            <div class="formulGlob">
                <div class="globCone">
                    <span class="fa fa-envelope inputUserIcon" style="color: #000000;"></span>
                    <input type="email" class="user-connect" placeholder="Adresse mail"/>
                </div>
                <div class="globCone">
                    <span class="fa fa-user inputUserIcon" style="color: #000000;"></span>
                    <input type="text" class="user-connect" placeholder="Pseudo"/>
                </div>
                <div class="globCone password">
                    <span class="fa fa-key inputUserIcon" style="color: #000000;"></span>
                    <input type="password" class="pass-connect" placeholder="Mot de passe"/>
                </div>
                <div class="globCone password">
                    <span class="fa fa-key inputUserIcon" style="color: #000000;"></span>
                    <input type="password" class="pass-connect" placeholder="Confirmation mot de passe"/>
                </div>
            </div>
            <button class="submit-regist">
                <span class="fa fa-pencil-square-o"></span> Inscription
            </button>
        </form>
        <form id="forgot-form" style="display: none" action="">
            <h2 class="title">Mot de passe oublié</h2>
            <div class="formulGlob">
                <div class="globCone password">
                    <span class="fa fa-envelope inputUserIcon" style="color: #000000;"></span>
                    <input type="password" class="pass-connect" placeholder="Adresse mail"/>
                </div>
            </div>
            <button class="submit-regist">
                <span class="fa fa-sign-in"></span> Connexion
            </button>
        </form>

Et avec ton code, sa ne veut pas...
De même, quand je clique quand tu fait avec data() sa ne fonctionne pas, la seul solution c'est avec attr()

Simplement aussi, avec ton code, les formulaires s’amuse a clignoté pour tous s’afficher...

EDIT : Si j'ai compris le problème sa vient de :
$buttons.on('click.change', changeForm); et $buttons.removeAttr('disabled').off('click.change');

remy76690
Auteur

C'est super, alors le dernier bug, c'ets quand on clique sur forgot, sa bloque les deux button, donc très bien mais sa les débloque jamais...

EDIT :
Bon j'ai modifier et sa fonctionne :

function changeForm () {
        var $this = $(this),
            actif = $this.attr('data-actif'),
            forgotButton = $('button.change-form[data-actif="forgot"]'),
            $buttons = $('button.change-form');

        // active le bouton et désactive l'event
        $buttons.removeAttr('disabled').off('click.change');

        // actions spécifiques
        if(actif == 'connection') {
            $this.html('Inscription').attr('data-actif', 'register');
        } else if (actif == 'register') {
            $this.html('Connexion').attr('data-actif', 'connection');
        } else { // forgot
            forgotButton.attr('disabled', 'disabled');
        }

        // cache le formulaire visible
        $('#forgot-form:visible,#connection-form:visible,#register-form:visible').fadeOut(1000, function(){
            // affiche le formulaire suivant
            $('#' + actif + '-form').fadeIn(1000, function(){
                // active l'event
                $buttons.on('click.change', changeForm);
                if(forgotButton.is(":disabled") && actif != 'forgot') {
                    forgotButton.attr('disabled', false);
                }
            });
        });
    }
    $('button.change-form').on('click.change', changeForm);