我正在尝试使用ajax加载内容时创建漂亮的动画.我想在使用“内容”重新加载div时使用显示图标,但是我想不出有可能只用CSS做到这一点.
图标应该：
>水平始终位于div的中心,带有“内容”
>垂直始终位于“内容的可见部分”的中心
>在幻灯片动画中隐藏菜单时,应将整个动画保留在“内容的可见部分”的垂直中心.
如果根据“内容的可见部分”不能进行垂直居中,则可以根据浏览器的视口居中图像.
[编辑]：
这是我的小提琴：http://jsfiddle.net/QWB9x/74/和可能应该改变的部分：
.loading #img_loading {
position: fixed;
top: 50%;
left: 50%;
display: block;
}
解决方法
这对我来说效果最好:)
function loadNewContent(){
$(".loaderCont").removeClass("loading")
}
$(document).ready(function () {
$("#hide_button").on("click",function () {
$(this).closest(".bottom").toggleClass("left_hided");
$(".loaderCont").toggleClass("left_hided2");
});
$("#filter1,#filter2,#filter3,#filter4").on("click",function() {
$(".loaderCont").addClass("loading");
setTimeout(loadNewContent,2000);
});
});
CSS：
.header {
background-color: Green;
width: 100%;
margin-bottom: 20px;
height: 100px;
}
.left {
background-color: Red;
float: left;
width: 100px;
}
.left_hided .left{
margin-left: -85px;
}
.right {
background: Aqua url("http://i.imgur.com/ifyW4z8.png") 50% repeat-y;
width: calc(100% - 140px);
float: right;
}
.left_hided .right{
width: calc(100% - 55px);
}
input{
float:right;
}
.loaderCont {
background-color: rgba(255,0.6);
height: 100%;
width: calc(100% - 140px);
position: fixed;
right: 0;
top: 0;
z-index: -1;
}
.left_hided2 {
width: calc(100% - 55px);
}
#loader {
background: url(http://i.stack.imgur.com/FhHRx.gif) no-repeat center center;
position: relative;
top: calc(50% - 16px);
left: calc(50% - 16px);
display: block;
height: 32px;
width: 32px;
}
.loading {
z-index: 9001;
}
JSFiddle：http://jsfiddle.net/ZRwzr/1/
