jquery - jQuery重复动画和打破表单的功能

Question

我有以下代码，对于忘记传递链接上的几次点击效果很好，然后当它经历整个点击周期时，它只会再次中断加载所有动画并且不会停止。我在下面粘贴了相关代码和小提琴链接。

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

小提琴

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/