有没有办法使用 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
});
});
这将是某种动画示例代码
最佳答案
你可以使用类似这样的逻辑:
<!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 文档 - 它应该是进入
元素的内容。一个更简单的方法可能是使用 iframe(当它没有任何内容时隐藏) - 当您单击按钮时，让 javascript 将 iframe 的 src 属性设置为“about.html”，然后使用 slipDown() 来动画它被“加载”。这样，“about.html”就可以是一个完整的 HTML 文档，您不必担心类似的问题。
关于javascript - jquery动画到新页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10938388/