Jquery 如何添加整页转换？（见说明）

我正在用HTML5和CSS3创建一个网站，我想在首页上只显示背景图片，并且可以选择用箭头或“进入网站”按钮进入网站

但是，我不希望单击按钮，它会将您带到另一个html文件/新站点（就像在标准导航中单击链接一样），而是希望它从底部淡入，就像这里的“从底部淡入”选项一样，进入同一html文档中的新页面（普通首页），这样访问者就不必加载新页面

有人吗

---

（顺便说一句，我在上面的链接中尝试了该功能，但无法使其工作）

您需要Modernizer、pagetransitions.js和animations.css来获得相同的效果如果您只需要“从底部淡入淡出”，则可以使用此修改后的pagetransitions.js

var PageTransitions = (function() {

    var $main = $( '#pt-main' ),
            $pages = $main.children( 'div.pt-page' ),
            $iterate = $( '#iterateEffects' ),
            animcursor = 1,
            pagesCount = $pages.length,
            current = 0,
            isAnimating = false,
            endCurrPage = false,
            endNextPage = false,
            animEndEventNames = {
                    'WebkitAnimation' : 'webkitAnimationEnd',
                    'OAnimation' : 'oAnimationEnd',
                    'msAnimation' : 'MSAnimationEnd',
                    'animation' : 'animationend'
            },
            animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ],
            // support css animations
            support = Modernizr.cssanimations;

    function init() {
            $pages.each( function() {
                    var $page = $( this );
                    $page.data( 'originalClassList', $page.attr( 'class' ) );
            } );
            $pages.eq( current ).addClass( 'pt-page-current' );
            $iterate.on( 'click', function() {
                    if( isAnimating ) {
                            return false;
                    }
                    nextPage( animcursor );
                    ++animcursor;
            } );
    }

    function nextPage(options ) {
            var animation = (options.animation) ? options.animation : options;
            if( isAnimating ) {
                    return false;
            }
            isAnimating = true;
            var $currPage = $pages.eq( current );
            if(options.showPage){
                    if( options.showPage < pagesCount - 1 ) {
                            current = options.showPage;
                    }
                    else {
                        return false;
                    }
            }
            else{
                    if( current < pagesCount - 1 ) {
                            ++current;
                    }
                    else {
                         return false;
                    }
            }
            var $nextPage = $pages.eq( current ).addClass( 'pt-page-current' ),
                    outClass = '', inClass = '';
              outClass = 'pt-page-fade';
              inClass = 'pt-page-moveFromBottom pt-page-ontop';
            $currPage.addClass( outClass ).on( animEndEventName, function() {
                    $currPage.off( animEndEventName );
                    endCurrPage = true;
                    if( endNextPage ) {
                            onEndAnimation( $currPage, $nextPage );
                    }
            } );
            $nextPage.addClass( inClass ).on( animEndEventName, function() {
                    $nextPage.off( animEndEventName );
                    endNextPage = true;
                    if( endCurrPage ) {
                            onEndAnimation( $currPage, $nextPage );
                    }
            } );
            if( !support ) {
                    onEndAnimation( $currPage, $nextPage );
            }

    }

    function onEndAnimation( $outpage, $inpage ) {
            endCurrPage = false;
            endNextPage = false;
            resetPage( $outpage, $inpage );
            isAnimating = false;
    }

    function resetPage( $outpage, $inpage ) {
            $outpage.attr( 'class', $outpage.data( 'originalClassList' ) );
            $inpage.attr( 'class', $inpage.data( 'originalClassList' ) + ' pt-page-current' );
    }
    init();
    return { 
            init : init,
            nextPage : nextPage,
    };

})();    

html

<div id="pt-main" class="pt-perspective">
    <div class="pt-page pt-page-1">     
         <h1><span>A collection of</span><strong>Page</strong> Transitions</h1>
         <div class="pt-triggers">
             <button id="iterateEffects" class="pt-touch-button">Show next page transition</button>                      
         </div>
    </div>
    <div class="pt-page pt-page-2">
        <h1><span>A collection of</span><strong>Page</strong> Transitions</h1>
    </div>
</div>    

页面转换的集合
显示下一页转换
页面转换的集合

---

在尝试开发此功能之前，请仔细考虑。“进入这个网站”按钮真的有用吗？你需要这个吗？大多数时候，你不需要这样的东西。如果你已经尝试过了，到底是什么不起作用？你能把代码放在JSFIDLE或codepen中吗？谢谢你的回答。。它似乎在你的JSFIDLE中起作用——但不知为什么它对我不起作用？这是我的：它只是显示一个灰色背景？为什么？还可以设置生成转换的按钮的样式吗？你需要添加Modernizr我在JSFIDLE中有Modernizr.custom.js的内容，是的，可以在JSFIDLE中设置按钮样式或用其他元素替换它。我只是从中复制了按钮并删除了额外的cssI。我已经尝试了所有方法，但仍然无法实现它工作啊。。好吧，让我告诉你我做了什么。。我有我的html代码-我将它链接到一个js文件，其中包含来自JSFIDLE的Modernizer代码-然后我将html代码链接到另一个js文件，其中包含来自JSFIDLE的其他javascript-然后我将我的html链接到一个css文件，其中包含来自JSFIDLE的css代码。。不知怎么的，它还是不起作用？仅显示灰色屏幕。。我希望你能告诉我我做错了什么——我的JSFIDLE文件：你忘了在JSFIDLE中添加框架和扩展的jquery

<div id="pt-main" class="pt-perspective">
    <div class="pt-page pt-page-1">     
         <h1><span>A collection of</span><strong>Page</strong> Transitions</h1>
         <div class="pt-triggers">
             <button id="iterateEffects" class="pt-touch-button">Show next page transition</button>                      
         </div>
    </div>
    <div class="pt-page pt-page-2">
        <h1><span>A collection of</span><strong>Page</strong> Transitions</h1>
    </div>
</div>