很奇怪，按理说就是简单的隐藏和显示，电脑上浏览器都是好的，我是用HBuilder X打包成的app运行在真机上没有用，然后挂到服务器，用手机浏览器打开网页点开也无法显示loading效果，下面是测试用的代码，求大神帮忙看看，可以直接找个空白网页拷贝进去看，滑铲跪谢。。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<title> </title>
<script src="js/index/jquery.min.js"></script>
<script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="css/index/style.css">
<link rel="stylesheet" href="css/index/style.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/index/font-awesome.min.css">
<style>
#fountainG{
position:relative;
margin:10% auto;
width:240px;
height:29px}
.fountainG{
position:absolute;
top:0;
background-color:#33cc99;
width:29px;
height:29px;
-webkit-animation:bounce_fountainG 1.3s infinite normal;
-moz-animation:bounce_fountainG 1.3s infinite normal;
-o-animation:bounce_fountainG 1.3s infinite normal;
-ms-animation:bounce_fountainG 1.3s infinite normal;
animation:bounce_fountainG 1.3s infinite normal;
-moz-transform:scale(.3);
-webkit-transform:scale(.3);
-ms-transform:scale(.3);
-o-transform:scale(.3);
transform:scale(.3);
border-radius:19px;
}
#fountainG_1{
left:0;
-moz-animation-delay:0.52s;
-webkit-animation-delay:0.52s;
-ms-animation-delay:0.52s;
-o-animation-delay:0.52s;
animation-delay:0.52s;
}
#fountainG_2{
left:30px;
-moz-animation-delay:0.65s;
-webkit-animation-delay:0.65s;
-ms-animation-delay:0.65s;
-o-animation-delay:0.65s;
animation-delay:0.65s;
}
#fountainG_3{
left:60px;
-moz-animation-delay:0.78s;
-webkit-animation-delay:0.78s;
-ms-animation-delay:0.78s;
-o-animation-delay:0.78s;
animation-delay:0.78s;
}
#fountainG_4{
left:90px;
-moz-animation-delay:0.91s;
-webkit-animation-delay:0.91s;
-ms-animation-delay:0.91s;
-o-animation-delay:0.91s;
animation-delay:0.91s;
}
#fountainG_5{
left:120px;
-moz-animation-delay:1.04s;
-webkit-animation-delay:1.04s;
-ms-animation-delay:1.04s;
-o-animation-delay:1.04s;
animation-delay:1.04s;
}
#fountainG_6{
left:150px;
-moz-animation-delay:1.17s;
-webkit-animation-delay:1.17s;
-ms-animation-delay:1.17s;
-o-animation-delay:1.17s;
animation-delay:1.17s;
}
#fountainG_7{
left:180px;
-moz-animation-delay:1.3s;
-webkit-animation-delay:1.3s;
-ms-animation-delay:1.3s;
-o-animation-delay:1.3s;
animation-delay:1.3s;
}
#fountainG_8{
left:210px;
-moz-animation-delay:1.43s;
-webkit-animation-delay:1.43s;
-ms-animation-delay:1.43s;
-o-animation-delay:1.43s;
animation-delay:1.43s;
}
@-moz-keyframes bounce_fountainG{
0%{
-moz-transform:scale(1);
background-color:#33cc99;
}
100%{
-moz-transform:scale(.3);
background-color:#0099cc;
}
}
@-webkit-keyframes bounce_fountainG{
0%{
-webkit-transform:scale(1);
background-color:#33cc99;
}
100%{
-webkit-transform:scale(.3);
background-color:#0099cc;
}
}
@-ms-keyframes bounce_fountainG{
0%{
-ms-transform:scale(1);
background-color:#33cc99;
}
100%{
-ms-transform:scale(.3);
background-color:#0099cc;
}
}
@-o-keyframes bounce_fountainG{
0%{
-o-transform:scale(1);
background-color:#33cc99;
}
100%{
-o-transform:scale(.3);
background-color:#0099cc;
}
}
@keyframes bounce_fountainG{
0%{
transform:scale(1);
background-color:#33cc99;
}
100%{
transform:scale(.3);
background-color:#0099cc;
}
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var loading = $('#fountainG');
loading.hide();
});
function loadingEffect() {
var loading = $('#fountainG');
loading.hide();
$(document).ajaxStart(function () {
loading.show();
}).ajaxStop(function () {
loading.hide();
});
}
function test(){
loadingEffect();
var html;
var username="Yizhi_Fan";
$.ajax({
url: "test",
type: "post",
data: "{ 'username': '"+username+"'}",
contentType: "application/json",
dataType: "json",
async: false,
beforeSend: function() {
},
complete: function() {
},
success: function (data) {
var o = eval("(" + data.d + ")");
var arr = new Array();
arr=o.Result;
for(var i=0;i<arr.length;i++){
// html+="<div>"+arr.eventtype+"</div>";
}
document.getElementById("ProjectList").innerHTML+=html;
},
error: function (err) {
window.alert(err.status);
}
});
}
</script>
</head>
<body>
<button onclick="test()" style="font-size: 2rem;">12321321321312321</button>
<div id="fountainG" >
<div id="fountainG_1" class="fountainG">
</div>
<div id="fountainG_2" class="fountainG">
</div>
<div id="fountainG_3" class="fountainG">
</div>
<div id="fountainG_4" class="fountainG">
</div>
<div id="fountainG_5" class="fountainG">
</div>
<div id="fountainG_6" class="fountainG">
</div>
<div id="fountainG_7" class="fountainG">
</div>
<div id="fountainG_8" class="fountainG">
</div>
</div>
<div id="ProjectList"></div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<title> </title>
<script src="js/index/jquery.min.js"></script>
<script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="css/index/style.css">
<link rel="stylesheet" href="css/index/style.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/index/font-awesome.min.css">
<style>
#fountainG{
position:relative;
margin:10% auto;
width:240px;
height:29px}
.fountainG{
position:absolute;
top:0;
background-color:#33cc99;
width:29px;
height:29px;
-webkit-animation:bounce_fountainG 1.3s infinite normal;
-moz-animation:bounce_fountainG 1.3s infinite normal;
-o-animation:bounce_fountainG 1.3s infinite normal;
-ms-animation:bounce_fountainG 1.3s infinite normal;
animation:bounce_fountainG 1.3s infinite normal;
-moz-transform:scale(.3);
-webkit-transform:scale(.3);
-ms-transform:scale(.3);
-o-transform:scale(.3);
transform:scale(.3);
border-radius:19px;
}
#fountainG_1{
left:0;
-moz-animation-delay:0.52s;
-webkit-animation-delay:0.52s;
-ms-animation-delay:0.52s;
-o-animation-delay:0.52s;
animation-delay:0.52s;
}
#fountainG_2{
left:30px;
-moz-animation-delay:0.65s;
-webkit-animation-delay:0.65s;
-ms-animation-delay:0.65s;
-o-animation-delay:0.65s;
animation-delay:0.65s;
}
#fountainG_3{
left:60px;
-moz-animation-delay:0.78s;
-webkit-animation-delay:0.78s;
-ms-animation-delay:0.78s;
-o-animation-delay:0.78s;
animation-delay:0.78s;
}
#fountainG_4{
left:90px;
-moz-animation-delay:0.91s;
-webkit-animation-delay:0.91s;
-ms-animation-delay:0.91s;
-o-animation-delay:0.91s;
animation-delay:0.91s;
}
#fountainG_5{
left:120px;
-moz-animation-delay:1.04s;
-webkit-animation-delay:1.04s;
-ms-animation-delay:1.04s;
-o-animation-delay:1.04s;
animation-delay:1.04s;
}
#fountainG_6{
left:150px;
-moz-animation-delay:1.17s;
-webkit-animation-delay:1.17s;
-ms-animation-delay:1.17s;
-o-animation-delay:1.17s;
animation-delay:1.17s;
}
#fountainG_7{
left:180px;
-moz-animation-delay:1.3s;
-webkit-animation-delay:1.3s;
-ms-animation-delay:1.3s;
-o-animation-delay:1.3s;
animation-delay:1.3s;
}
#fountainG_8{
left:210px;
-moz-animation-delay:1.43s;
-webkit-animation-delay:1.43s;
-ms-animation-delay:1.43s;
-o-animation-delay:1.43s;
animation-delay:1.43s;
}
@-moz-keyframes bounce_fountainG{
0%{
-moz-transform:scale(1);
background-color:#33cc99;
}
100%{
-moz-transform:scale(.3);
background-color:#0099cc;
}
}
@-webkit-keyframes bounce_fountainG{
0%{
-webkit-transform:scale(1);
background-color:#33cc99;
}
100%{
-webkit-transform:scale(.3);
background-color:#0099cc;
}
}
@-ms-keyframes bounce_fountainG{
0%{
-ms-transform:scale(1);
background-color:#33cc99;
}
100%{
-ms-transform:scale(.3);
background-color:#0099cc;
}
}
@-o-keyframes bounce_fountainG{
0%{
-o-transform:scale(1);
background-color:#33cc99;
}
100%{
-o-transform:scale(.3);
background-color:#0099cc;
}
}
@keyframes bounce_fountainG{
0%{
transform:scale(1);
background-color:#33cc99;
}
100%{
transform:scale(.3);
background-color:#0099cc;
}
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var loading = $('#fountainG');
loading.hide();
});
function loadingEffect() {
var loading = $('#fountainG');
loading.hide();
$(document).ajaxStart(function () {
loading.show();
}).ajaxStop(function () {
loading.hide();
});
}
function test(){
loadingEffect();
var html;
var username="Yizhi_Fan";
$.ajax({
url: "test",
type: "post",
data: "{ 'username': '"+username+"'}",
contentType: "application/json",
dataType: "json",
async: false,
beforeSend: function() {
},
complete: function() {
},
success: function (data) {
var o = eval("(" + data.d + ")");
var arr = new Array();
arr=o.Result;
for(var i=0;i<arr.length;i++){
// html+="<div>"+arr.eventtype+"</div>";
}
document.getElementById("ProjectList").innerHTML+=html;
},
error: function (err) {
window.alert(err.status);
}
});
}
</script>
</head>
<body>
<button onclick="test()" style="font-size: 2rem;">12321321321312321</button>
<div id="fountainG" >
<div id="fountainG_1" class="fountainG">
</div>
<div id="fountainG_2" class="fountainG">
</div>
<div id="fountainG_3" class="fountainG">
</div>
<div id="fountainG_4" class="fountainG">
</div>
<div id="fountainG_5" class="fountainG">
</div>
<div id="fountainG_6" class="fountainG">
</div>
<div id="fountainG_7" class="fountainG">
</div>
<div id="fountainG_8" class="fountainG">
</div>
</div>
<div id="ProjectList"></div>
</body>
</html>
