JSFiddle - React, Tailwind, and code Playground
HTML
<div id="feed">
<div class="loading" style="display:none;">Loading</div>
<div id="feed-nav">Nav</div>
<div id="feeditems">Feed items</div>
</div>
JavaScript
$.ajax({
url: "/echo/html/",
type: "POST",
data: {
html: "<div>Item 1</div><div>item 2</div>"
},
cache: false,
beforeSend: function(){
$('#feed-nav').after('<div class="ajax-request loading"></div>', function(){
$("#feeditems").fadeOut();
});
},
success: function(html){
$('#feed .ajax-request').fadeOut('fast', function(){
console.log("add items");
$("#feeditems").append(html).slideDown('slow');
});
}
});
return false;