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

您好，提前感谢您提供的任何解决方案。我一直在尝试在用户切换页面时添加淡入淡出功能。我在这里和其他论坛上尝试了许多解决方案，但似乎都不适用于淡出。淡入效果很好，我只是不得不在身体标签上加上。幽灵般的。我所做的一切都没有对淡出起作用。任何帮助都将不胜感激，因为我对编码相当陌生

<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>

幽灵般地{
不透明度：0；
}
$（文档）.ready（函数（）{
$（'.ghostly'）。设置动画({
不透明度：“1”
}, 3000);
});
$（“a”）。单击（函数（事件）{
event.preventDefault（）；
linkLocation=this.href；
$（“正文”）.fadeOut（1000，重定向页面（链接位置））；
});
功能重定向页面（链接）{
document.location.href=链接；
}

1。淡出立即开火！ 单击锚定后，下一页将开始加载，当前页上的任何代码都将停止。您在等待<代码>淡出完成时，未错误地覆盖了该情况！您需要将该调用包装在匿名函数中

e、 g

否则，您只需立即调用

redirectPage

，并将其返回值传递给fadeOut方法

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

2.Ajax加载： 您可以执行以下操作来替换整个页面：

JSFiddle： 它使用

$.when（）

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

*注意：由于“访问控制允许来源”错误，这将不会加载链接中的页面，但在您自己的网站中应该可以正常工作

3.将大多数jQuery代码放入文档就绪状态： 任何访问“现有”元素的jQuery代码都需要在文档中准备就绪（即您假定已加载的元素。在本例中，

'a'

=所有锚定）

e、 g

您可以将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的引用作为第一个参数传递。注意：尽管看起来很相似，但这并不是一个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)});
    });
});

---

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

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

---

你能发布一个提琴吗？我在下面添加了一个使用Ajax的示例。如果它看起来过于复杂，就道歉。如果您希望使用回调来代替承诺，则可以使用回调，但这样它在加载时会淡出，但在淡入新页面之前会等待淡出和加载完成：）一旦页面开始卸载，所有动画通常会停止（取决于浏览器）。淡入淡出问题是由于立即调用了

重定向页面（linkLocation）

，并将结果传递回

淡出淡出（而不是等待淡出完成）。非常感谢，这非常有效，但整个过程没有如我所希望的那样运行。其目的是使页面平稳过渡，但在淡出完成后，浏览器仍会弹出一个白色页面一秒钟，是否有办法停止此操作？是的，切换到“选项：”下提到的页面动态Ajax加载。这就是Ajax的目的（完全避免页面刷新）：）很高兴您喜欢它。如果可以，请接受以下答案：）
<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>

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

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

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

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