onclick - onClick イベントを逆にする

Question

私はこのコードを持っています：

$(function(){
    $('#gallery').click(function(){
        $('.overlay').fadeIn(500);
        $('#infographic').delay(800).fadeIn(200);
    });
});

$('#gallery')もう一度クリックすると、上記が逆になります。

誰？？

Answer 1

これはうまくいくはずです：

$(function(){
    $('#gallery').click(function(){
        $('.overlay').toggle(500);
        $('#infographic').delay(800).toggle(200);
    });
});

http://api.jquery.com/toggle/

Answer 2

フェードインでは、オーバーレイが終了してから 300 ミリ秒後にインフォグラフィックが開始されるため、インフォグラフィックが終了してから 300 ミリ秒後にオーバーレイがフェードアウトするように、手順を逆にして遅延を変更しました。次のコードは、フェードインを正確に逆にします。

$(function(){
    $('#gallery').click(function(){
        // Check the current state - are things visible? If yes, fade out
        if ($('#inforgraphic').is(':visible')) {
            $('#infographic').fadeOut(200);
            $('.overlay').delay(500).fadeOut(500);
        // If not visible, fade in
        } else {
            $('.overlay').fadeIn(500);
            $('#infographic').delay(800).fadeIn(200);
        }
    });
});