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

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/

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

1 个答案: