如何在windows.location.href中使用fadeOut

时间:2016-03-05 11:52:59

标签: jquery

我正在尝试使用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;}

1 个答案:

答案 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');
  }
}