javascript - 只有第一个随机引用淡入

Question

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

var quotes = {
    quote1: "Life isn’t about getting and having, it’s about giving and \
being - Kevin Kruse - ",
    quote2: "Whatever the mind of man can conceive and believe, it can \
achieve - Napoleon Hill - "
}

$(document).ready(function() {
  // function generator
  var randQuote = function(obj) {
    var keys = Object.keys(obj);
    //print key values randomly
    return obj[keys[Math.floor(keys.length * Math.random())]];
  };
  // function display
  $("button").click(function myQuote() {
    $("#demo").fadeIn();
    document.getElementById("demo").innerHTML = randQuote(quotes);
  });
});

#quote {
  background-color: white;
  border-radius: 2%;
  box-shadow: 0 0 25px #161616;
}

.paragraph {
  line-break: auto;
  font-family: 'Satisfy', cursive;
  font-size: xx-large;
  margin: 20px;
  display: none;
}

.display {
  background-color: #dfdfdf;
}

.title {
  font-family: 'Dancing Script', cursive;
  margin: 20px;
}

.btn-custom {
  margin: 20px;
  font-family: 'Dancing Script', cursive;
  font-size: x-large;
}

.container {
  position: fixed;
  top: 35%;
  left: 30%;
  margin-top: -100px;
  margin-left: -200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-8 col-md-offset-4">
      <h1 class="title"><strong>Random Quotes For You</strong></h1>
    </div>
  </div>
  <div class="row">
    <div class="col-md-8 col-md-offset-2" id="quote">
      <p id="demo" class="paragraph"></p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-8 col-md-offset-5">
      <button onclick="myQuote()" class="btn btn-primary btn-custom">New Quote</button>
    </div>
  </div>
</div>

Answer 1

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

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