使用Jquery淡出来进行页面转换

Question

您好，并提前感谢您提供任何解决方案。当用户切换页面时，我一直在尝试添加淡入和淡出功能。我已尝试过在这里和其他论坛上找到的许多解决方案，但似乎没有任何解决方案可用于淡出。淡入效果很好我只需要添加.ghostly到body标签。我所做的一切都没有为淡出效果而努力。我非常感谢任何帮助，因为我对编码很新。

<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
    .ghostly {
        opacity: 0;
    }
</style>
<script>
    $(document).ready(function() {
        $('.ghostly').animate({
            opacity: '1'
        }, 3000);
    });
    $("a").click(function(event) {
        event.preventDefault();
        linkLocation = this.href;
        $("body").fadeOut(1000, redirectPage(linkLocation));
    });

    function redirectPage(link) {
        document.location.href = link;
    }
</script>

Answer 1

1。 Fadeout马上开火！

单击锚点后，下一页面将开始加载，当前页面上的任何代码都将停止。您通过不等待fadeOut完成错误地覆盖了这种情况！您需要将该调用包装在匿名函数中，

e.g。

$("body").fadeOut(1000, function(){redirectPage(linkLocation)});

否则你只是立即调用redirectPage 并将其返回值传递给fadeOut方法！

选项：另一种转换方法是使用Ajax加载所有页面。然后你可以应用你想要的任何效果（你可以在你的锚点击事件处理程序中一般地这样做）。这要求您在页面更改时更新浏览器历史记录，但非常有效（您可以通过任何方式转换页面）。

2。 Ajax加载：

您可以执行以下操作来替换整个页面：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/bwdwc/3/

jQuery(function ($) {
    $('.ghostly').animate({
        opacity: '1'
    }, 3000);
    $(document).on('click', "a", function (event) {
        event.preventDefault();
        $.when($("body").fadeOut(4000).promise(), $.ajax({
            url: this.href,
            type: 'get',
            dataType: 'html'
        })).done(function (html) {
            var newDoc = document.open("text/html", "replace");
            newDoc.write(html);
            newDoc.close();
            $("body").css({
                display: "none"
            });
            $("body").fadeIn(4000);
        });
    });
});

它使用$.when()来组合动画承诺和Ajax调用。当两者都完成时，它处理来自Ajax页面加载的数据并替换页面的整个主体。

*注意：由于“访问控制 - 允许 - 来源”而导致页面无法加载链接。错误，但应该在您自己的网站上正常工作。

3。将大多数jQuery代码放入 document ready ：

访问＆＃34; 现有＆＃34;的任何jQuery代码元素需要准备好文档（即您假设的元素已经加载。在这种情况下'a' = 所有锚点）。

e.g。

$(document).ready(function() {
    $('.ghostly').animate({
        opacity: '1'
    }, 3000);
    $("a").click(function(event) {
        event.preventDefault();
        linkLocation = this.href;
        $("body").fadeOut(1000, redirectPage(linkLocation));
    });
});

您可以将jQuery代码放在body的末尾以获得类似的效果，但它会减少可移植代码（特别是当代码位于单独的.js文件中时...它通常会/应该是为了改善缓存。）

4。或者使用延迟事件处理程序：

如果您使用延迟事件处理程序，则可以执行此操作：

<script>
    $(document).ready(function() {
        $('.ghostly').animate({
            opacity: '1'
        }, 3000);
    });

    // Catch all anchor clicks bubbled to the document...
    $(document).on('click', "a", function(event) {
        event.preventDefault();
        linkLocation = this.href;
        $("body").fadeOut(1000, redirectPage(linkLocation));
    });

    function redirectPage(link) {
        document.location.href = link;
    }
</script>

延迟事件处理程序通过侦听未更改的祖先元素（例如，在这种情况下是文档，因为它已经存在）中的事件来工作，然后使用jQuery选择器来匹配元素，< em>然后为导致事件的任何匹配元素调用该函数。

5。说明：

我还建议您使用此快捷方式来准备文档：

$(function(){
     // Your code here
});

或更好（以避免与$的命名空间冲突）：

jQuery(function($){
     // Your code using the local $ here
});

这个第二个版本是最好的，因为这个文档准备好传递对jQuery的引用作为第一个参数。 注意：虽然它看起来很相似，但这不是一个IIFE（立即调用的函数表达式），你有时会看到包装jQuery代码。

6。最终建议：

把所有这些放在一起，你就明白了：

jQuery(function($) {
    $('.ghostly').animate({
        opacity: '1'
    }, 3000);
    $(document).on('click', "a", function(event) {
        event.preventDefault();
        linkLocation = this.href;
        $("body").fadeOut(1000, function(){redirectPage(linkLocation)});
    });
});

Answer 2

尝试将fadeout处理程序绑定到卸载事件

$( window ).unload(function() {
alert( "Handler for .unload() called." );
});