2

パスを忘れたリンクを数回クリックするとうまく機能する次のコードがあります。クリックサイクル全体を通過すると、すべてのアニメーションの読み込みが中断され、停止しません。以下に関連コードとフィドルリンクを貼り付けました。

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

フィドル

4

1 に答える 1

2

これは、クリックされるたびにクリックされた要素に別のクリック ハンドラーをアタッチしているためです。そのため、要素がクリックされると、複数のクリック ハンドラーが一度に実行されます。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/

于 2013-05-03T21:30:38.037 に答える