CODEWITHSUNDEEP
jquery
Andy Holmes
Andy Holmes

Reputation: 8077

jQuery repeating animation and breaking functionality of forms

I've got the following code which works well for a couple of clicks on the forgot pass link, then when it goes through an entire click cycle it just breaks loading all the animations again and not stopping. I've pasted relevent codes below and a fiddle link.

jQuery

$(document).ready(function () {
    $('.forgot').on('click', function (e) {
        e.preventDefault();
        $('#login-form').fadeOut(400);
        $('#forgot-pass-form').delay(200).fadeIn(400);
        $(this).text('Suddenly remembered your details? Click here');
        $(this).on('click', function () {
            $('#forgot-pass-form').fadeOut(400);
            $('#login-form').delay(200).fadeIn(400);
            $(this).text('Forgotten your login details?');
        });
        e.stopPropagation();
    });
});

fiddle

Upvotes: 2

Views: 59

Answers (1)

Ram
Ram

Reputation: 144699

That's because you are attaching another click handler to the clicked element every time it is clicked, so when the element is clicked it's several click handlers are executed at once. One option is using fadeToggle method.

$(document).ready(function () {
    $('.forgot').on('click', function (e) {
        e.preventDefault();
        $('#login-form').fadeToggle(400);
        $('#forgot-pass-form').fadeToggle(400);
        $(this).text(function(_, textContent) {
            return textContent === 'Forgotten your login details?' 
                   ? 'Suddenly remembered your details? Click here' 
                   : 'Forgotten your login details?'
        });
    });
});

Improved fade effect:

$(document).ready(function () {
    $('.forgot').on('click', function (e) {
        e.preventDefault();
        $('form:visible').fadeOut(400, function(){
           $(this).siblings('form').fadeIn();
        });
        $(this).text(function (_, textContent) {
            return textContent === 'Forgotten your login details?' ? 'Suddenly remembered your details? Click here' : 'Forgotten your login details?'
        });
    });
});

http://jsfiddle.net/WTtNS/

Upvotes: 2

Related Questions