jQuery 重复动画并破坏表单功能

Question

我有以下代码，它适用于在忘记传递链接上单击几次，然后当它经历整个单击周期时，它只会再次中断加载所有动画并且不会停止。我在下面粘贴了相关代码和 fiddle 链接。

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

Answer 1

这是因为每次单击元素时都会将另一个单击处理程序附加到被单击的元素，因此当单击该元素时，会同时执行多个单击处理程序。一种选择是使用 fadeToggle 方法。

$(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?'
        });
    });
});

改进的淡入淡出效果:

$(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/