1

有没有办法使用 jquery.animate 来加载一个带有 ajax 的页面，并在它准备好动画时让它向上或向一侧滑动？所以让我们说我在 index.html 页面中，我想去 about.html 页面，它会首先加载它，当它准备好而不是刷新到新页面时，它将使用以下方法对其进行动画处理：http： //demos.flesler.com/jquery/localScroll/#section4c

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

这将是如何动画的某种示例代码

4

2 回答 2

0

您可能会产生相同的效果，但实际上不会刷新页面。

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

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

于 2012-06-07T19:18:05.013 回答
0

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

<!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 文档——它应该是进入 <body> 元素的东西。

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

于 2012-06-07T19:25:41.640 回答