淡入，淡出不起作用(或者我不知道如何让它工作)

Question

我有一个带有以下类的div：

#instrucPanel {
    background-color:black;
    opacity:0;
    position: absolute;
    left: 180px;
    top: 71px;
    height: 226px
}

页面加载时隐藏。我想在用户点击按钮时显示它。如果用户单击相同的按钮，则将其隐藏。

为此，我使用以下JavaScript代码：

function ShowHideInstruc()
{
    if ($.myNameSapace.instShown)
    {
        $.myNameSpace.instShown = false;
        $('#instrucPanel').fadeOut('fast');
    }
    else
    {
        $.myNameSpace.instShown = true;
        $('#instrucPanel').fadeIn('slow');
    }
}

但我什么也没看到，它总是隐藏着。

我做错了什么？

Answer 1

首先，必须使用display:none;而不是opacity:0。

然后您可以使用.fadeToggle()方法，如下所示：

function ShowHideInstruc()
{
     var show = $.viacognitaspace.instShown = !$.viacognitaspace.instShown; 
     $('#instrucPanel').fadeToggle((show) ? 'fast' : 'slow');
}

请注意，这种方法是一个完整的DRYer。

Answer 2

opacity: 0;使您的面板透明。

使用display: none;在开始时隐藏面板，然后使用jQuery 进行淡入和淡出

Answer 3

UPDATE以下是您想要的JSFIDDLE 的工作演示