CODEWITHSUNDEEP
javascriptjquery
Dr. Younes Henni
Dr. Younes Henni

Reputation: 1771

Only first random quote fades in

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>

Upvotes: 1

Views: 176

Answers (2)

Travis Acton
Travis Acton

Reputation: 4440

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

Upvotes: 2

KyleS
KyleS

Reputation: 401

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

Upvotes: 0

Related Questions