在顯示塊中添加滑動效果，不顯示div

Question

我正在使用JS函數在較小的屏幕上顯示/隱藏DIV，但是我正在使用的函數只是打開DIV而不滑動它。

這是JS代碼。

$('.searchBtn').click(function (){
     var nav = $('.SearchParameters');
     if(nav.hasClass('showing')){
         nav.removeClass('showing').addClass('hiding');
     }else{
         nav.removeClass('hiding').addClass('showing');
     }
 });
$(window).resize(function(){
    var winwidth = $(window).innerWidth();
    if(winwidth > 768){
        $('.SearchParameters').removeClass('showing').removeClass('hiding');
    }
});

這是CSS

.SearchParameters.showing {
    display: block;
}
.SearchParameters.hiding {
    display: none;
}

我不想增加高度，因為DIV上有邊框，並且看起來像一條細線。 僅當在移動設備屏幕中打開網站時，才會顯示此DIV。

Answer 1

僅僅是因為您從未設置動畫。 如果您想要幻燈片效果，可以舉個例子

if (menuClicked === false) {
        $('.slide-menu').animate(
        {
            margin: '0 0 0 0'
        }, 200);
        menuClicked = true;
    }
    else
    {
        $('.slide-menu').animate(
        {
            margin: '0 0 0 -180px'
        }, 200);
        menuClicked = false;
    }

CSS的默認視圖：

.slide-menu 
{
position: fixed;
height: 100%;
width: 180px;
margin: 0 0 0 -180px;
}

一個想法可能是將您的內容移出屏幕的可見區域，只要它是“隱藏的”，而如果您“顯示”它，則只是將內容的位置更改為可見區域中的某個位置。