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

У меня есть 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');
    }
}

Но я ничего не вижу, это всегда скрыто.

Что я делаю не так?

Источник

3 ответа

Решение

Во-первых, вы должны использовать display:none; в отличие от opacity:0,

Тогда вы можете использовать .fadeToggle() метод, как это:

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

Обратите внимание, что этот подход намного суше.

Источник

opacity: 0; делает вашу панель прозрачной

Использовать display: none; спрятать панель в начале, а затем просто исчезать и исчезать с помощью jQuery

Источник

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

Источник
Другие вопросы по тегам