Question

有没有办法使用jquery.animate来加载带有ajax的页面，并且当它准备动画时它会向上滑动还是向侧面滑动？所以我想在index.html页面中说我想要转到about.html页面，它会先加载它，当它准备就绪而不是刷新到新页面时，它会使用这个方法为它设置动画：{{ 3}}

function(){
$("#go2About").click(function(){
    $('about.html').animate({
         //animate the new page here
    });
});

这将是一种如何动画

的示例代码

Answer 1

只有不实际刷新页面才能产生相同的效果。

例如，如果将每个“页面”HTML包装在包装器<div>元素中，则可以简单地为这些包装器div设置进出用户视图端口的动画，以创建页面转换的效果。

您的AJAX调用可以使用HTML页面填充相应的<div>元素，一旦加载，您可以调用.animate()函数来交换页面。

Answer 2

你可以使用类似这样的逻辑：

<!DOCTYPE>

<html>
<head>
    <title>Test</title>

    <script type="text/javascript">
        function loadIt() {
            $.ajax({
                url: "about.html",
                cache: false,
                success: function (data) {
                    $("#content").empty();
                    $(data).hide().appendTo($("#content")).slideDown();
                },
                error: function () {
                    alert("something went wrong");
                }
            });
        }
    </script>
</head>
<body>
    <input type="button" id="button1" value="Load About" onclick="loadIt();" />

    <br />

    <div id="content" style="width: 400px; height: 400px; border: 1px solid #000;">

    </div>
</body>
</html>

但是要知道“about.html”的内容不应该是完整的HTML文档 - 它应该是进入＆lt; body＆gt;的内容。元件。

更简单的方法可能是使用iframe（当它没有任何内容时隐藏） - 当您单击按钮时，让javascript将iframe的src属性设置为“about.html”，然后使用slideDown（）动画它被“加载”。这样，“about.html”可以是一个完整的HTML文档，您不必担心这样的事情。

jquery动画到新页面

2 个答案: