jQuery 淡入不同的页面答案

【问题标题】：jQuery fade to a different pagejQuery 淡入不同的页面
【发布时间】：2013-12-13 03:55:07
【问题描述】：

我有一个登录页面，其中包含一个由按钮单击触发的简短 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);
          });
        });

【问题讨论】：

您是否愿意接受以下想法：与其完全重定向页面，不如考虑使用 jQuery 的 .load() 方法来加载另一个文档并使用 fadeIn 作为回调？
是的，我愿意接受任何想法。对 Javascript/jQuery 来说相当新，所以我仍在学习如何最好地解决这些问题。感谢您在下面的建议！
没问题，希望对你有用！

标签： javascript jquery settimeout fadeto

【解决方案1】：

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

通过 AJAX 将第二页加载到内存或隐藏的 DIV 中
淡出屏幕上已有的内容
将新页面交换到 DOM（设置为已淡出）
淡入新内容

【讨论】：

【解决方案2】：

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

$(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/

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

【讨论】：

【解决方案3】：

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

【讨论】：