Javascript 显示带有淡入淡出效果的隐藏文本以及背景div？

我在单击主文本时应用了淡入淡出效果。但是在效果期间，它后面的div有点粗糙。隐藏文本会显示淡入效果，但div不会。
如何使div随文本一起淡出。 小提琴在这儿

$（文档）.ready（函数（）{
$（“.toggle”）。单击（函数（）{
$（this.find（“.hide”）.fadeToggle（）；
});
});
.hide{
显示：无；
}
@导入url(https://fonts.googleapis.com/css?family=Questrial);
.spcredit{
颜色：#666666；
字体系列：“Questrial”，无衬线；
文本转换：大写；
字体大小：9px；
}
.类别{
宽度：440px；
填充顶部：10px；
边缘底部：40px；
背景：白色；
文本对齐：对齐；
盒影：0px 3px 10px rgba（0,0,0,15）
}

隐藏文本1
使用
slideToggle（）
代替
fadeToggle（）

编辑：
如果您想同时进行淡入和滑动，则需要使用另一个包装器。已编辑
问题在于您的
div
中的class
类别
。它会根据新元素调整其高度，使其脱离动画

var hidden = true;
$(document).ready(function(){
    $(".toggle").click(function(){
       if (hidden) {
         $(".category").animate({
          height: '+='+ $(".category").height() + 'px'
         }, 1000);
         hidden = false;
       }
       else {
         $(".category").animate({
          height: '-='+ $(".category").height() / 2 + 'px'
         }, 1000);
         hidden = true;
       }
       $(this).find(".hide").fadeToggle();
    });
});

下面创建了一个不错的动画

var hidden = true;
$(document).ready(function(){
    $(".toggle").click(function(){
       if (hidden) {
         $(".category").animate({
          height: '+='+ $(".category").height() + 'px'
         }, 1000);
         hidden = false;
       }
       else {
         $(".category").animate({
          height: '-='+ $(".category").height() / 2 + 'px'
         }, 1000);
         hidden = true;
       }
       $(this).find(".hide").fadeToggle();
    });
});

这里有一个您可以在
$（this）
上使用
.parent（）
，然后调用
.toggle（）
而不是
fadeToggle（）
。您还可以选择速度。查看此处的代码
您需要从
类别
中提取
.hide
元素。比如，如何提高滑行速度？