当我点击按钮时，整个网页移动到另一个网页，如幻灯片

Question

我有两个html页面：Page1.html，Page2.html。当我点击第1页中带有幻灯片效果转换的按钮时，我想获得页面2.html。我发现很多插件和解决方案可以在两个div之间滑动或在容器内滑动，但我需要的是完整的页面更改。

// Author: Max McKinney
// Version: 1.0
// Description: Fades the page from a given color to show the content and fades out to the given color.
// Requires: jQuery

(function ( $ ) {

    $.fn.mPageTransition = function(options) {

        // Grab the settings
        var settings = $.extend({
            color: "#ffc107",
            fadeOutTime: 300,
            fadeInTime: 300
        }, options)

        // Get the body reference and get the original background color as we will be changing that during the transition
        var body = $('body');
        var originalBackgroundColor = $(body).css("background-color");

        // Due to the css the body is initially hidden so we will fade it in. This prevents and "flickering" from occuring
        $(body).css('visibility','visible').hide().fadeIn(settings.fadeInTime);

        // Intercept all link clicks to fade page out
        $("a").click(function(e) {
            // Get the original link location and stop it from occuring
            var link = this;
            e.preventDefault();

            // First fade body content away, fade the background color to the defined custom color. Once it has fade in, fade it away and then follow the link href
            $(body).animate({
                "background-color": settings.color,
                "opacity": 0
            }, settings.fadeInTime, function() {
                // Fade background color back to orginal and once finished follow link
                $(body).animate({"background-color": originalBackgroundColor}, settings.fadeOutTime, function() {
                    var href = $(link).attr("href");
                    location.href=href;
                })
            });

        });

    };

}( jQuery ));