Хранение сеанса и проблема исчезновения переключателя

Question

Итак, у меня есть небольшая проблема с хранилищем сессий, которое я создал.

По сути, я хочу, чтобы сессия сохраняла состояние отображения, независимо от того, является ли оно блоком или нет, теперь это работает отлично, если я использую переключатель нафункция щелчка, но я хочу использовать fadeToggle для эстетики и по какой-то причине он больше не будет хранить состояние.

<button class="button">Show / Hide</button>
<div class="content">Content Goes Here</div>

.button {
    background: white;
    border: 2px solid #333;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    padding: 10px 20px;
    width: 100%;
}

.content {
    display: none;
    background: dodgerblue;
    color: white;
    margin-top: 20px;
    padding: 20px;
}

function toggleTest() {
    $(".button").click(function (event) {
         $(".content").stop().fadeToggle();
         sessionStorage.setItem("show-hide", $(".content").css("display"));
    });

    if (sessionStorage.getItem("show-hide")) {
        $(".content").css("display", sessionStorage.getItem("show-hide"));
    }
}

$(document).ready(function () {
    toggleTest();
});

Любые предложения будут удивительными, почему это не сработает с fadeToggle.

Приветствия!

CodePen: https://codepen.io/nickelse/pen/zYOXGjw

Answer 1

это потому, что fadeToggle использует анимацию (до завершения анимации код sessionStorage.setItem("show-hide", $(".content").css("display")); уже выполнен), используйте функцию обратного вызова для преодоления fadeToggle, и она должна нормально работать

при подключении к работе fiddle ссылка

function toggleTest() {
    $(".button").click(function (event) {
         $(".content").stop().fadeToggle(function(){
            sessionStorage.setItem("show-hide", $(".content").css("display"));
         });
         
    });

    if (sessionStorage.getItem("show-hide")) {
        $(".content").css("display", sessionStorage.getItem("show-hide"));
    }
}

$(document).ready(function () {
    toggleTest();
});

.button {
    background: white;
    border: 2px solid #333;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    padding: 10px 20px;
    width: 100%;
}

.content {
    display: none;
    background: dodgerblue;
    color: white;
    margin-top: 20px;
    padding: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button">Show / Hide</button>
<div class="content">Content Goes Here</div>