Question

我已经在互联网上搜索了几个小时的解决方案，但我的代码仍然不起作用。我正在创建一个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));

那么我怎样才能实现页面转换的淡入和淡出效果？为什么顶级代码不起作用？

Answer 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

Answer 2

试试这个：

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

Answer 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));

jQuery fadeTo无法在页面退出时工作

3 个答案: