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();}); 
});

Answer 2

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

此外，您可以删除onclick="myQuote()"元素上的<button>。

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

只有第一个随机报价淡入

2 个答案: