fadeIn, fadeOut не работает (или я не знаю, как заставить это работать)

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

ОБНОВЛЕНИЕ Вот рабочая демонстрация того, что вы хотите на JSFIDDLE