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)">

因此，如果我点击图像，过渡insdie课程可以顺利进行。

但我的问题是你如何在显示器上应用相同的东西：none和display：block？

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

（你可以到我的网站点击左侧的cog按钮） 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;

}

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

如果我把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;
}

但问题是，一旦我点击切换按钮，有一个空白的空间来代替隐藏的滑块。

任何人都知道造成这种情况的原因是什么？

Answer 1

你可以直接使用show或hide代替toggleClass。例如

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

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

Answer 2

我会在css中使用不透明度和转换，只需在脚本中切换类。

//js
jQuery('.fluid_container').toggleClass('hide');

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

.fluid_container.hide {
    opacity: 0;
}

如何使jquery顺利过渡

2 个答案: