JSFiddle - React, Tailwind, and code Playground
HTML
<a href="#">link</a>
<img src="http://2.bp.blogspot.com/_OIHTbzY7a8I/TOaiTKLqszI/AAAAAAAAAHM/eb3iiOqxzKg/s640/Auto_Audi_Audi_concept_car_005130_.jpg" />
<div></div>
CSS
img { display: none; }
a { display: block; }
JavaScript
$("a").click(function(){
var img = $("img"),
div = $("div");
$.ajax({
url: "test.php",
contentType: "html",
beforeSend: function(){
img.fadeIn(600, function(){
div.append(" | beforeSend finished | ");
div.trigger("animationComplete");
});
},
error: function(){
if(img.is(':animated')) {
div.one("animationComplete", function() {
div.append(" | error | ");
});
} else {
div.append(" | error | ");
}
}
});
return false
});