Edited to fix another bug.
Hi,
I rejigged it a bit.
-
I moved the click button functions out of the init function and then removed the init - because you dont need to call a function, to call a function to load the page - you can just skip straight to getQuote() call.
-
I changed the div you’re trying to “append” to. I changed it to html and quotebox. this ensures the animation works for fade out and in. nb - you will have to change your css to style the quote, by styling #quotebox p{styles}, not #quoteConetent. You can get rid of the <p> out of the quotebox div.
-
You dont need the removeQuote function. You only needed that because you were appending, rather than inserting with html.
-
I wrapped the whole page in a doc ready function like this to ensure the page runs through the script on load: (i’m not entirely sure if this is strictly required as it works without, but i think its good practice).
<code>$(document).ready(function() {
//page stuff
});</code>
-
I removed the crossorigin.me (it was creating a lot of delay and is unnecessary if you use codepen and supply the project link as http.
-
I put an animation before your jquery fill order (is that even the right term!) call to allow the fade in/out. I used the animate method to change the opacity instead of fadeOut (does the same thing essentially|) for this one.
Hope that helps for next time 
all you need to do now is straighten up those buttons on smaller screens 
$(document).ready(function() {
//Function to obtain JSON data in the form of quote content from the Forismatic API and fade in
var getQuote = function() { $.getJSON('http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?', function(json) {
$("#quotebox").animate({
opacity: 0
}, 375, function() {
$(this).animate({
opacity: 1
}, 750); $("#quotebox").html("<i class = 'fa fa-quote-left fa-2x quote-mark'></i>" + json.quoteText + "<br>" + "<h3>" + json.quoteAuthor + "</h3>");
});
});
};
//Function to run when page is loaded
//Ensures there is a quote when page is loaded initially
getQuote();
//Enable sharing of quote via Twitter using Tweet button
var tweetQuote = function() {
window.open("https://twitter.com/intent/tweet?text=" + $("#quoteContent").text());
};
$('#shareBtn').on('click', tweetQuote);
$('#newQuoteBtn').on('click', getQuote);
});
)