ajax请求时过渡动画,在等待外部ajax请求时显示动画

创建2个类之一就是让DIV隐藏。

.hidden{

display:none;

}

第二个显示图像。

.show_image{

position:fixed;top:0;right:0;bottom:0;left:0;

background: rgba(0,0,0,0.5) url(/img/spinner.gif) no-repeat 50% 50%;

z-index:100;

background-size: 5ex;

}

和你的HTML代码将

Your content

最初加载图像是在隐藏模式。现在，在发送Ajax请求之前，请取消隐藏加载映像，并在获得服务器响应后隐藏它。

$.ajax({

url: "http://wwww.example.com",

type: 'POST',

data: yout_data,

dataType: 'json',

//async: true,

//cache:true,

success: function(data) {

result = data;

$('.show_image').addClass("hidden");

},

error: function() {

console.log("error: load handler failed: " + url);

result = "null";

}

});

加载图像将出现在页面中间，背景将变为透明。如果您发现任何困难，请让我知道。

根据你的代码：

function showDetails(id) {

$('#ElementInfo').html("");

$('.show_image').removeClass("hidden"); // Now the image will be displayed

var jsonData = getData(); // it will request the data to be return

// in the ajax request i have stopped animation "in success"

$('#ElementInfo').html(makeHtml(data));}