我正在尝试使用jQuery制作动画。它适用于当前页面,但不是在我使用带有Javascript的window.location.href时(当x.value为true时)。
这是我的HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test jQuery</title>
<link rel="stylesheet" href="test-alert-1.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function result(){
var x = document.getElementById("name");
if (x.value){
window.location.href='http://www.google.com';
}else{
alert('This field cannot be empty');
}
}
</script>
<script>
`$`(window).load(function() {
`$`(".loader").fadeOut("1000");
})
</script>
</head>
<body>
<div class="loader"> </div>
<form action="" method="post">
<div>
<label for="name">Name :</label>
<input type="text" id="name" />
</div>
</form>
<input type="image" onclick="result();" src="../../image/loupe.png" class="loupe">
</body>
</html>
我的CSS:
.loader {
background: url(../../image/squares2.gif) no-repeat center;
cursor: wait;
height: 100%;
left: 0px;
position: fixed;
top: 0px;
width: 100%;
z-index: 9999;}
答案 0 :(得分:1)
你不能fadeOut location.href的改变,
你可以尝试,淡出并添加location.href作为回调
类似这样的事情
function result(){
var x = document.getElementById("name");
if (x.value){
$(".loader").fadeOut(1000, function(){
window.location.href='http://www.google.com';
});
}else{
alert('This field cannot be empty');
}
}