javascript - 加载页面 Ajax，然后将其滑入页面或插件

Question

我的网站结构或多或少是这样的:主页 - 第 1 页 - 第 2 页 - 第 3 页。
我想实现的是一个在页面之间进行转换的网站，例如“移动应用程序”，您可以在其中单击一个按钮，然后新页面滑入。
现在我正在研究如何实现这一点，如果使用 AJAX (加载页面并滑动它但我不知道 AJAX)或使用插件(但我找不到任何东西)。
另一种选择是创建一个页面，然后进入该页面(最好找到一个插件来做到这一点)但是页面很大所以我的网站会变得很重。
有谁知道如何帮助我？谢谢大家!

ps: 该网站仅针对平板电脑和智能手机开发

Answer 1

有很多方法可以实现你想要的，下面我将向你展示其中的一种。 (答案底部的示例)

您将内容隐藏在屏幕之外，并在页面加载时滑动它:

HTML:

<div class="content_div">
    <p class="title">HOME</p>
    <a href="" class="nav">page 1</a>
</div>

CSS:

body{
    overflow:hidden;
}
.content_div {
    box-shadow:0 0 10px;
    border:10px solid black;
    height:800px;
    left:-1000px;
    width:100%;
    -webkit-animation:slide_in 800ms ease-out forwards;
    position:absolute;
    box-sizing:border-box;
}
.title{
    font-size:50px;
    text-align:center;
}
.nav{
    margin-left:20px;
}
@-webkit-keyframes slide_in{
    0% {
        left:-1000px;
    }
    100% {
        left:0px;
    }
}

现在，当您点击链接时，您会使用自定义处理程序拦截点击，阻止默认重定向，执行“滑出”动画，一旦动画完成，您将手动重定向:

.promise().done() 中的函数将在对象上的所有动画完成后立即执行:

$(function(){
    $(".nav").on("click",function(ev){
        ev.preventDefault();        
        $(".content_div").animate({
            "margin-left":$(".content_div").width() +100
        }).promise().done(function(){
            window.location="http://jsfiddle.net/TheBanana/27o989vy/embedded/result/";
        });
    });
});

这是一个 Live Example

在您网站的每个页面上执行此操作，您应该有滑动过渡。如果您想要不同的动画，请更改过渡。

注意:在 jsfiddle 中它会有点困惑，因为它会在内部自行打开，但在您的网站上它会根据需要工作。

AJAX 更新:

如果你想避免页面在窗口重新定位到新页面时消失，你需要从新页面动态加载内容而不是改变位置。

您可以使用普通的 ajax 来做到这一点，或者您可以使用 jQuery 的 ajax 扩展 .load()，它在幕后执行相同的 ajax:

$(".nav_waitforajax").on("click", function (ev) {
    ev.preventDefault();
    $(".content_div").animate({
        "margin-left": $(".content_div").width() + 100
    }).promise().done(function () {
        $(".content_div").load("/three", function () {
            $(".content_div").animate({
                "margin-left": 0
            });
        });
    });
});

Ajax Example

更新 2:动态内容的委托(delegate)处理程序:

//monitors a `mouseover` event on every element inside `.content_div`
//which fits the selector of "*" (everything)
$(".content_div").on("mouseover","*",function(){
    $(this).css({
        "background":"red"
    });
});

Delegates Example