只有第一个随机引用淡入

Question

I am building a random quote generator app. When I try to add the fading effect in my JS (on click), it only works for the first quote.

 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

You've already called the fadeIn on that element. You need to fade it out then flip the html and fade it back in. Once you understand the WHY you must do that then you should look at fadeToggle as it provides and animation complete callback so you can have a smother transition with loading your html then showing it again with the fade in.

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

Answer 2

This should fade in the quote at the beginning, then fade it out and replace it with the new quote, then fade back in. You can change the "500" to whatever fade time suits best.

Also, you can get rid of the onclick="myQuote()" on the <button> element.

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