Javascript jQuery转换动画未发生

我想使效果，将使以前的报价消失和新报价出现时，我点击按钮，但很好的过渡效果

在下面的代码中，我尝试使用jQuery.animate和opacity属性，但它只插入新的引号，没有任何动画效果

$（函数（）{
$（'.btn'）。在（'click'，function（）上{
变量字母='0123456789ABCDEF'；
变量$body=$（'body'）；
变量$h1=$（'h1'）；
变量$innerhtml=$（'.innerhtml'）；
var color='#'；
对于（变量i=0；i<6；i++）{
颜色+=字母[Math.floor（Math.random（）*16）]；
}
$body.css（'背景'，颜色）；
$h1.css（'color'，color'）；
$innerhtml.css（'color'，color）；
var-link=https://gist.githubusercontent.com/rat395/9de1f8ad52f53170f90d9d8a204ee9ad/raw/e3ba3cf835cba8ecf8fa8da1e513bb40059f9355/quotes.json';
$.getJSON（链接、函数（数据）{
var random=data[Math.floor（（Math.random（）*data.length）+1）]；
$innerhtml.animate（{//问题出在这里，它不起作用
不透明度：0
}, 500,
函数（）{
$（此）。设置动画({
不透明度：1
}, 500);
$（this.html（'“'+random[0]+'
'+'
'+random[1]）；
});
})
});
});
正文{
过渡：全部缓进缓出1.5s；
}
.innerhtml{
过渡：全部缓进缓出1.5s；
}
.flex{
边缘顶部：100px；
显示器：flex；
高度：300px；
证明内容：中心；
对齐项目：居中；
}
.包装纸{
边界半径：5px；
填充：20px；
背景：白色；
宽度：50%；
}
.文本输入{
显示器：flex；
证明内容：中心；
}
.按钮{
显示器：flex；
证明内容：周围的空间；
边缘顶部：20px；
}
.btn{
高度：40px；
}
.innerhtml{
文本对齐：居中；
边缘顶部：20px；
边缘底部：30px；
线高：30px；
字体大小：20px；
}

换衣服

.innerhtml {
  transition: all ease-in-out 1.5s;
}

到

示例：
将
.toggleClass（）
添加到正文和
.innerhtml

$body.css('background', color).toggleClass('act die');
$innerhtml.css('color', color).toggleClass('act die');

然后定义了两个类：
.act
和
.die
，如下所示：

 body.act {
    background: currentColor;
    transition: all ease-in-out 1.5s;
  }
  body.die {
    background: currentColor;
    transition: all ease-in-out 1.5s;
  }

.innerhtml.act {
  text-align: center;
  padding: 10px;
  margin: 0 auto;
  line-height: 20px;
  font-size: 16px;
  transition: all linear 2s;
}
.innerhtml.die {
  line-height: 0;
  font-size: 0;
  transition: all linear 1s;
}

属性
转换
需要实际属性位于同一规则集中，以便知道要设置什么动画。因为您有一个可变颜色属性，所以我使用了
background:currentColor
。基本布局也有一些变化，所以现在不应该有任何跳跃

一小条

$（函数（）{
$（'.btn'）。在（'click'，function（）上{
变量字母='0123456789ABCDEF'；
变量$body=$（'body'）；
变量$innerhtml=$（'.innerhtml'）；
var color='#'；
var i；
对于（i=0；i<6；i++）{
颜色+=字母[Math.floor（Math.random（）*16）]；
}
$body.css（'background'，color.）.toggleClass（'act-die'）；
$innerhtml.css（'color'，color.）.toggleClass（'act-die'）；
var-link=https://gist.githubusercontent.com/rat395/9de1f8ad52f53170f90d9d8a204ee9ad/raw/e3ba3cf835cba8ecf8fa8da1e513bb40059f9355/quotes.json';
$.getJSON（链接、函数（数据）{
var random=data[Math.floor（（Math.random（）*data.length）+1）]；
$innerhtml.animate（{//问题出在这里，它不起作用
不透明度：0
}, 500,
函数（）{
$（此）。设置动画({
不透明度：1
}, 1000);
$（this.html（“”+random[0]+“
”+random[1]）；
});
});
});
});
body.act{
背景：古今色；
过渡：所有缓进输出2秒；
}
body.die{
背景：古今色；
过渡：所有缓进输出2秒；
}
.包装纸{
边界半径：5px；
填充：20px；
背景：白色；
宽度：50%；
最小高度：50vh；
保证金：0自动；
}
.按钮{
显示器：flex；
证明内容：中心；
边缘顶部：20px；
}
.btn{
高度：40px；
}
.innerhtml.act{
文本对齐：居中；
利润率：20%自动5%；
线高：20px；
字体大小：16px；
过渡：全线性2s；
}
.innerhtml.die{
线高：0；
字号：0；
过渡：所有线性1；
}

新报价

 body.act {
    background: currentColor;
    transition: all ease-in-out 1.5s;
  }
  body.die {
    background: currentColor;
    transition: all ease-in-out 1.5s;
  }

.innerhtml.act {
  text-align: center;
  padding: 10px;
  margin: 0 auto;
  line-height: 20px;
  font-size: 16px;
  transition: all linear 2s;
}
.innerhtml.die {
  line-height: 0;
  font-size: 0;
  transition: all linear 1s;
}