Question

我正在使用以下顺序创建一个简单的启动页面：

淡入元素
等待5秒
淡出元素
启动新页面

我可以按步骤1到3顺序正常工作。

然而，只要我将链接重定向添加到我的链（步骤4），它就会快速地执行步骤1到3并跳转。这是我正在使用的代码：

<html>
<head>
<style type="text/css">
.splash p { background: yellow; display: none; }
</style>
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$.fn.go_homebase = function() {
    var url = "homebase.html";
    $(location).attr('href',url);
}

$(document).ready(function() {
    $('.splash p').fadeIn('slow').delay(5000).fadeOut('slow').go_homebase();
});
</script>
</head>
<body class="splash">
<p>Splash Page!</p>
</body>
</html>

我应该采取适当和更好的方式吗？

Answer 1

您应该在go_homebase的完整回调中致电fadeOut，例如：

$('.splash p').fadeIn('slow').delay(5000).fadeOut('slow', function() { $(this).go_homebase(); });

Answer 2

这对我来说很有效。

$(document).ready(function() {
    $('.splash p').fadeIn(1500).delay(5000).fadeOut(2000,
        function() { window.location = "http://google.com"; });
});

Answer 3

这应该可以解决问题：

$('.splash p').fadeIn('slow').delay(5000).fadeOut('slow', 
  function(){ $(this).go_homebase()}
);

当上一个动画结束时，您需要将重定向功能作为回调调用。

jQuery：以URL跳转结束的Splash页面动画序列

3 个答案: