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