jquery - 如何在切换时删除 jQuery UI 幻灯片效果方 block

Question

我正在使用 jQuery 制作一个简单的菜单 - 如何在切换“幻灯片”效果时删除方形背景并使一切变得更加流畅？

$(document).ready(function(){

    $('.sidebar1 a').click(function(){

        var ssbar = $(this).attr('href'); 

        $(ssb1).toggle('slide');

        return false;

    });

});

https://jsfiddle.net/p96k9x67/

我尝试使用:

过渡:0.15s 线性；变换原点:19px 19px；

在 main-content 类上但这没有用。

Answer 1

你可以用这个来完成它:

.sidebar1 {
    z-index: 1;
}
.main-wrapper > .ui-effects-wrapper {
    width: 0 !important;
    overflow: visible !important;
}

请注意，使用 !important 是为了覆盖 jQuery UI 添加的内联样式。 !important 的明确目的是覆盖级联顺序，因此这符合修饰符的可接受使用。问题的根本原因是绿线元素出现时围绕侧边栏流动(可能是因为 flex 显示样式)。

演示:https://jsfiddle.net/zczwjdrw/1