jQuery slideUp («медленно»), но всегда отображается для экрана рабочего стола

Question

Я пытаюсь анимировать $("#somediv").slideDown("slow"); и $("#somediv").slideUp("slow"); Но когда он выдвигается () и вы увеличиваете экран, он скрывается.

Пример:

function toggle() {
    $("#somediv").slideUp("2000");
}

/* Desktop */
@media only screen and (min-width: 1px) {
    #somediv {
        display: block;
        /* More styling */
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="javascript:void(0);" onclick="toggle()">TOGGLE</a>
<div id="somediv">Div</div>

Я искал в Интернете, но не смог найти решение.
Возможно ли это?

Спасибо за помощь!

решено Для людей с такой же проблемой:

        function toggle() {
            if($("#somediv").css('display') == "none") {
                $("#somediv").slideDown("2000");
            }else {
                $("#somediv").slideUp("2000");
            }
        }
        $(window).on("resize",function(){  
            if (window.matchMedia('(min-width: 800px)').matches) {
                $("#somediv").show();
            }else {
                $("#somediv").hide();
            }
        });

Answer 1

Вы не можете оживить display. Вам нужно анимировать что-то вроде высоты, равной нулю, или ширины, равной нулю, или transform: scale(0.0001), или что-то в этом роде.

Answer 2

Используйте это:

$("#somediv").slideToggle("2000");

вместо функции переключения, и вам не нужно ничего дополнительного.

function toggle() {
    $("#somediv").slideToggle("2000");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="javascript:void(0);" onclick="toggle()">TOGGLE</a>
<div id="somediv">Div</div>

Answer 3

решено
Для людей с такой же проблемой:

        function toggle() {
            if($("#somediv").css('display') == "none") {
                $("#somediv").slideDown("2000");
            }else {
                $("#somediv").slideUp("2000");
            }
        }
        $(window).on("resize",function(){  
            if (window.matchMedia('(min-width: 800px)').matches) {
                $("#somediv").show();
            }else {
                $("#somediv").hide();
            }
        });