0

我有一个登录页面，其中包含一个由按钮单击触发的简短 jQuery 动画，动画结束后，我希望它重定向到服务器上的另一个页面，但我希望它从登录页面淡入到另一个页面。

目前我已经设置好了，所以它会在重定向到另一个页面之前淡化文档正文，但它会淡化为白色，所以当淡化开始时你可以看到白色背景而不是我的彩色背景。我猜有更好的方法来实现这种效果。

这是我当前的代码：

$(document).ready(function(){
          $("#button").click(function(){
            $(".left").animate(
                {left:'50%'}, 800, 'linear'
            );
            $(".right").animate(
                {right:'50%'}, 800, 'linear'
            );
            $(".top").stop(true, true).delay(800).animate(
                {top:'36px'}, 800, 'easeOutBounce'
            );
            $(".bot").stop(true, true).delay(800).animate(
                {top:'492px'}, 800, 'easeOutBounce'
            );
            $(document.body).delay(1900).fadeTo("slow", 0);
            setTimeout(function () 
            { window.location.href = "start.php"; }, 2000);
          });
        });
4

3 回答 3

2

只有在以下情况下，这才会起作用：

  • 通过 AJAX 将第二页加载到内存或隐藏的 DIV 中
  • 淡出屏幕上已有的内容
  • 将新页面交换到 DOM（设置为已经淡出）
  • 淡入新内容
于 2013-12-12T19:36:42.827 回答
1

可能在您的页面中有几个块级元素，绝对位于彼此之上。将空页面的 z-index 设置为低于当前页面的 z-index。然后将新页面加载到空页面中。然后淡化顶部，删除它的内容，并交换 z-indexes。

于 2013-12-12T19:41:14.430 回答
1

如果您愿意放弃重定向，这样的事情应该可以工作。它应该是一个更平滑的过渡：

$(document).ready(function(){
  $("#button").click(function(){
    $('#hiddenContainer').load('URL TO OTHER DOC HERE');
    $(".left").animate(
        {left:'50%'}, 800, 'linear'
    );
    $(".right").animate(
        {right:'50%'}, 800, 'linear'
    );
    $(".top").stop(true, true).delay(800).animate(
        {top:'36px'}, 800, 'easeOutBounce'
    );
    $(".bot").stop(true, true).delay(800).animate(
        {top:'492px'}, 800, 'easeOutBounce'
    );
    $('SELECTOR OF YOUR OTHER CONTENT').delay(1900).fadeOut(800, function(){
        $('#hiddenContainer').fadeIn(800);
    });
  });
});

http://api.jquery.com/load/

大致思路，希望对你有帮助！

于 2013-12-12T19:43:21.687 回答