Javascript页面翻转效果仅限1 div

Question

我有一个PHP文件，它返回我的书籍的html文件内容（文本和图像）。在页面顶部，我有next和prev按钮来更改我的#reader div的内容。每次用户点击上一个或下一个按钮时，我都需要像我的#reader div那样的翻页效果。你们有什么例子可以告诉我吗？

这是我的HTML：

<div class="container">
    <div class="toolKit">
        <p id="prev">Prev</p>
        <p id="next">Next</p>
    </div>
    <div id="reader"></div>
</div>

这是JS代码：

    var page = 1;

    $("#next").click(function () {
        if(page < 10) {
            page = page + 1;
            dataString = 'page=' + page;
            $.ajax({
                type: "POST",
                url: "ntkPageCaller.php",
                data: dataString,
                cache: false,
                success: function (response) {
                    $("#reader").html(response);
                }
            });
            return false;
        }});

Answer 1

如果您只想要一个显示内容更改的视觉提示，请尝试以下操作：

....
success: function (response) {
    $("#reader").fadeOut().delay(300).html(response).fadeIn();
}