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

由于您的淡入功能在覆盖完成后300ms开始显示信息图，我已经颠倒了步骤并修改了延迟，以便覆盖图在信息图表完成后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);
        }
    });
});

反转onClick事件

2 个答案: