jquery - 如何让jquery顺利过渡

Question

我已经查阅了其他人关于这个 jquery 转换顺利执行的问题，发现它可以像下面那样完成。

<img src="images/header_type1.png" 
     onclick="jQuery('.xe-clearfix').addClass('menu_type_1',200),
              jQuery('.xe-clearfix').removeClass('menu_type_3',200)">

这样，如果我单击图像，独立类(class)的过渡就可以顺利进行。

但我的问题是如何将相同的东西应用于 display:none 和 display: block？

我设置了 toggleclass 以查看它是否有效，但它断断续续。

(你可以去我的网站点击左边的齿轮按钮) http://xestudio.xco.kr/ (您需要禁用您的 chrome 扩展程序 adblock 或 ublock，我向您保证这是一个安全的网页)

这是代码

jQuery('.cmn-toggle').on('click',function(){
jQuery('.fluid_container').toggleClass('hide',200);
jQuery('.gnb>ul>li>a').toggleClass('on',200);
jQuery('.logo_text').toggleClass('on',200);
jQuery('.xe-clearfix').toggleClass('on',200);
jQuery('.active').toggleClass('on',200);

});

这是 CSS

    .fluid_container {
    display: block;
    margin: 0 auto;
    width: 100%;
    height:400px;
}
    .fluid_container.hide {
        display: none;
    margin: 0 auto;
    width: 100%;
    height:400px;

}

此外，您还可以看到左侧面板有 slider ，您可以移动它来调整正文的宽度，我也尝试将相同的过渡效果应用于此。

输入200和不输入有区别吗？

这是代码

(function($) {
var $width = $('#slider_body_width');
var $sample= $('body');
var $samples= $('.shrink .header');

$width.on('input', function() {
$sample.width($width.val()+"%");
$samples.width($width.val()+"%"); 
$('body').css('margin','0 auto');  
});
})(jQuery);

谢谢。

---

已添加。

为了解决这个问题，我是这样做的

.fluid_container {
margin: 0 auto;
width: 100%;
height: 400px;
transition: all 200ms ease-in-out;
}

.fluid_container.hide {
height: 0;
}

但问题是，一旦我点击切换按钮， 有一个空白空间可以替换隐藏的 slider 。

有人知道是什么原因造成的吗？

Answer 1

您可以直接使用 show 或 hide 而不是 toggleClass。例如

$('.fluid_container').hide(300);

上面的代码确保你的容器将在 300 毫秒内隐藏