本人这里实现这个效果,主要是使用了jq animate()方法
animate() 方法这里说明一下,该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。
width:'toggle'这个方法这里也做了一下说,这个toggle属性就在元素是显示的情况下,就会执行隐藏,如果元素的显示的情况下触发就会执行显示
以下为本人实现点击按钮隐藏和显示效果的js代码
$("#menuBtn").on('click',function(){
//layui-icon-shrink-right
let btn=$("#menuBtn i");
if(btn.hasClass('layui-icon-spread-left')){
btn.removeClass(' layui-icon-spread-left').addClass('layui-icon-shrink-right');
$(".layui-side").animate({width:'toggle'}); //toggle如果原来div是隐藏的就会把元素显示,如果原来是显示则隐藏
$(".layui-logo").animate({width:'toggle'});
$(".layui-body").animate({left:'0px'});
$(".layui-footer").animate({left:'0px'});
}else{
btn.removeClass('layui-icon-shrink-right').addClass('layui-icon-spread-left');
$(".layui-side").animate({width:'toggle'});
$(".layui-logo").animate({width:'toggle'});
$(".layui-body").animate({left:'200px'});
$(".layui-footer").animate({left:'200px'});
}
})
以下是根据上面代码基础上,加上根据分辨率显示和隐藏的代码
$("#menuBtn").on('click', function() {
//layui-icon-shrink-right
let btn = $("#menuBtn i");
if (btn.hasClass('layui-icon-spread-left')) {
menuHide(btn);
btn.addClass('btn-index');
} else {
btn.removeClass('btn-index');
menuShow(btn);
}
})
$(window).resize(function() {
let width = $(document.body).width();
let btn = $("#menuBtn i");
if (width < 1000) {
if (btn.hasClass('layui-icon-spread-left')) {
menuHide(btn);
}
} else {
if (!btn.hasClass('btn-index')) {
if (btn.hasClass('layui-icon-shrink-right')) {
menuShow(btn);
}
}
}
});
function menuShow(btn) {
btn.removeClass('layui-icon-shrink-right').addClass('layui-icon-spread-left');
$(".layui-side").animate({ width: 'toggle' });
$(".zq-logo").animate({ width: 'toggle' });
$(".layui-body").animate({ left: '200px' });
$(".layui-footer").animate({ left: '200px' });
}
function menuHide(btn) {
btn.removeClass(' layui-icon-spread-left').addClass('layui-icon-shrink-right');
$(".layui-side").animate({ width: 'toggle' }); //toggle如果原来div是隐藏的就会把元素显示,如果原来是显示则隐藏
$(".zq-logo").animate({ width: 'toggle' });
$(".layui-body").animate({ left: '0px' });
$(".layui-footer").animate({ left: '0px' });
}
以上为本人自己研究弄的,有更好的方法请留言