javascript - jQuery slideUp ("slow"), 但总是显示在桌面屏幕上

Question

我正在尝试制作 $("#somediv").slideDown("slow"); 和 $("#somediv").slideUp("slow"); 但是当它 slideUp() 并且你使屏幕变大时，它会保持隐藏状态。

例子:

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) 或类似内容设置动画。