I'm looking to create a cool effect where the previous quote disappears and a new one appears when I click on a button, all with a smooth transition effect.
In my attempt below using jQuery .animate and opacity property, I'm struggling to make it work as intended. It just inserts the new quote without any animation effects.
$(function() {
$('.btn').on('click', function() {
var letters = '0123456789ABCDEF';
var $body = $('body');
var $h1 = $('h1');
var $innerhtml = $('.innerhtml');
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
$body.css('background', color);
$h1.css('color', color);
$innerhtml.css('color', color);
var link = 'https://gist.githubusercontent.com/rat395/9de1f8ad52f53170f90d9d8a204ee9ad/raw/e3ba3cf835cba8ecf8fa8da1e513bb40059f9355/quotes.json';
$.getJSON(link, function(data) {
var random = data[Math.floor((Math.random() * data.length) + 1)];
$innerhtml.animate({ //This part is causing issues, not working properly
opacity: 0
}, 500,
function() {
$(this).animate({
opacity: 1
}, 500);
$(this).html('<p>"' + random[0] + '"</p>' + '<br>' + random[1]);
});
})
});
});body {
transition: all ease-in-out 1.5s;
}
.innerhtml {
transition: all ease-in-out 1.5s;
}
.flex {
margin-top: 100px;
display: flex;
height: 300px;
justify-content: center;
align-items: center;
}
.wrapper {
border-radius: 5px;
padding: 20px;
background: white;
width: 50%;
}
.text-in {
display: flex;
justify-content: center;
}
.buttons {
display: flex;
justify-content: space-around;
margin-top: 20px;
}
.btn {
height: 40px;
}
.innerhtml {
text-align: center;
margin-top: 20px;
margin-bottom: 30px;
line-height: 30px;
font-size: 20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex">
<div class="wrapper">
<div class="innerhtml"></div>
<div class="buttons">
<button class="btn btn-default off"><span class="glyphicon glyphicon-off"</span></button>
<button class="btn btn-default quote">New quote</button>
</div>
</div>
</div>