jQuery fadeTo 在页面退出时不起作用答案

【问题标题】：jQuery fadeTo not working on page exitjQuery fadeTo 在页面退出时不起作用
【发布时间】：2014-08-17 02:28:54
【问题描述】：

我已经在互联网上搜索了几个小时的解决方案，但我的代码仍然无法正常工作。我正在创建一个 jQuery 页面转换，其中我的网站的主要内容（页眉和页脚除外）将在页面加载时淡入，并在页面退出/转换到另一个页面时淡出。我正在使用fadeTo() 来改变它的不透明度，因为fadeIn() 和fadeOut() 删除了主要内容，导致页脚“向上移动”页面。

问题是我当前的代码没有显示任何淡入淡出的过渡效果：

(function( $ ) {
"use strict";

$(function() {

    // Your code here
        $("#main.site-main").css('opacity', '0');
        $("#main.site-main").fadeTo(1000, 1); 

$(".nav-menu li").click(function(event) {

            event.preventDefault();

            newLocation = this.href;

$("#main.site-main").fadeTo(1000, 0, function () {

            window.location = newLocation;

        });


});


}(jQuery));

但以下代码有效，它仅在页面加载时“淡入”显示主要内容：

(function( $ ) {
    "use strict";

$(function() {

    // Your code here
        $("#main.site-main").css('opacity', '0');
        $("#main.site-main").fadeTo(1000, 1); 

});


}(jQuery));

那么如何实现页面过渡的淡入淡出效果呢？为什么顶部代码不起作用？

【问题讨论】：

@SagarSakre：请不要使用内联代码跨度 (like this) 来突出显示单词，它们仅用于句子中的代码。请参阅this Meta post 了解更多信息。

标签： jquery wordpress animation transition

【解决方案1】：

应该可以了，我就是这样弄的，你可以采纳那个代码：

jQuery('a').click(function(event) {

    // don't exec the link loading (a href stuff) - we do it explicitly
    event.preventDefault();
    var that = jQuery(this);
    var target = jQuery(this).attr("target");
    if (jQuery.trim(target).length > 0)
    {
        window.open(that.attr("href"), target);
    }
    else
    {
        // fade out content, load next document
        jQuery('.content-style').animate({
            opacity : "0"
        }, {
            duration : 700,
            "complete" : function() {

                document.location = that.attr("href");
            }
        } // complete callback
        ); // animate properties
    }
}); // click callback

【讨论】：

谢谢阿克塞尔。我试过你的代码，但它也没有重现淡入淡出效果。我只更改了'a' 和'.content-style'。如果您知道为什么会这样，如果可能的话，如果您能分享您的想法/解决方案，我将不胜感激。
要深入研究，我们需要更多代码，即该页面的相应 html 和 JS/jQuery 代码或指向您网站的示例链接。

【解决方案2】：

试试这个：

$(".nav-menu li").on("click", function(event) {
    $("#main.site-main").fadeTo(1000, 0, function() {
        window.location = event.currentTarget.href;
    });
});

【讨论】：

谢谢@David。这行得通！但是出现了一些小故障。如果您能分享一些关于它们发生的原因以及如何修复它们（如果您知道的话）的见解，我将非常感激：1. 有时页面在地址栏中加载为“未定义”，而 404 页面会pop up --- 2. 离开页面时的淡入淡出动画有时不会在下一页加载之前完成。我尝试过加快淡入淡出的速度，但这会导致上述问题更频繁地发生 --- 再次感谢 David。

【解决方案3】：

在此站点上的一些人的帮助下，经过反复试验，以下代码可以满足我的需求。虽然这对我来说有点慢，但这是另一天的问题。

代码：

   (function( $ ) {

        "use strict";

        $(function() {

            // Your code here

    var $sitemain = $( "#main" ).find( "div.site-main" );

            $sitemain.fadeTo(200, 1); 

    $($( "#site-navigation" ).find( "a" ), $( "#masthead" ).find( "a.home-link"   )).on("click", function(event) {
    $sitemain.fadeTo(200, 0, function() {
        window.location = event.currentTarget.href;
        });
    });


    });
    }(jQuery));

【讨论】：