javascript - 显示 block 添加滑动效果不显示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;
    }

默认 View 的CSS:

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

一个想法可能是将您的内容移出屏幕的可见区域，只要它是“隐藏”的，如果您“显示”它，您只需将内容的位置更改为可见区域中的某些内容即可。