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;使您的Panel透明化。

使用display: none;在开头隐藏面板，然后使用jQuery将fadein和fadeout隐藏起来

Answer 3

更新以下是JSFIDDLE

上您想要的工作演示

fadeIn，fadeOut not working（或者我不知道如何使它工作）

3 个答案: