Javascript 只有第一个随机引用会淡出

我正在构建一个随机报价生成器应用程序。当我尝试在我的JS中添加淡入淡出效果时（单击），它只适用于第一个引号

var引号={
引文1：“生活不是得到和拥有，而是给予和拥有\
成为-凯文·克鲁斯-“，
引文2：“无论人类的思想能够构想和相信什么，它都能\
实现-拿破仑山-
}
$（文档）.ready（函数（）{
//函数发生器
var randQuote=功能（obj）{
var keys=Object.keys（obj）；
//随机打印键值
返回obj[keys[Math.floor（keys.length*Math.random（））]；
};
//功能显示
$（“按钮”）。单击（函数myQuote（）{
$（“#演示”）.fadeIn（）；
document.getElementById（“demo”）.innerHTML=randQuote（引号）；
});
});
#引用{
背景色：白色；
边界半径：2%；
盒影：0 0 25px#161616；
}
.段{
断线：自动；
字体系列：“满足”，草书；
字体大小：xx大号；
利润率：20px；
显示：无；
}
.展示{
背景色：#dfdfdf；
}
.头衔{
字体系列：“舞蹈脚本”，草书；
利润率：20px；
}
.btn海关{
利润率：20px；
字体系列：“舞蹈脚本”，草书；
字号：x大号；
}
.集装箱{
位置：固定；
最高：35%；
左：30%；
利润上限：-100px；
左边距：-200px；
}

为您随机报价

新报价
您已经在该元素上调用了fadeIn。您需要淡出它，然后翻转html并淡入。一旦您理解了为什么必须这样做，那么您应该看看fadeToggle，因为它提供了动画和完整的回调，这样您就可以通过加载html进行一个窒息的过渡，然后在淡入时再次显示它

$("button").click(function(){
    var flip = $("#div1");
    flip.fadeToggle('slow', function (){flip.html('weee').fadeToggle();}); 
});

这应该在报价开始时淡入，然后淡出并替换为新报价，然后淡入。您可以将“500”更改为最适合的淡入淡出时间

此外，您还可以去掉
元素上的
onclick=“myQuote（）”

$("button").click(function myQuote(){
  $("#demo").fadeOut(500, function(){
      document.getElementById("demo").innerHTML = randQuote(quotes);
  });
  $("#demo").fadeIn(500);
});

fadeOut和fadeIn再次删除
onclick
属性，这就是导致console@Dr.YounesHenni不要害怕尝试，看看你是否能解决问题。@Dr.YounesHenni用一个例子编辑了我的答案。塔德曼是对的，这些是一些基本的理解，它将帮助你通过尝试和错误来学习，所以不要害怕失败。谢谢。如果没有淡出呢？你必须先淡入然后淡出文本，否则新引号之间的过渡看起来会很不稳定。我不太明白你的要求。对不起，我忘了删除html中的点击事件。它会引起一种不稳定的行为。它现在工作得很好，谢谢你。