jQuery 如何使用jquery在加载时滑动整个页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10166510/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to slide an entire page on load with jquery
提问by Bridget Kilgallon
I'd like to slide my entire page down when it's changed. I'm thinking the way to do this will be to create a vertical slide that plays when a link is clicked and again when the page loads? So far, I've only been able to create a slide that affects a particular DIV. I'd also like it to slide in vertically. Any ideas will be greatly appreciated!
我想在更改时将整个页面向下滑动。我在想这样做的方法是创建一个垂直幻灯片，在单击链接时播放，并在页面加载时再次播放？到目前为止，我只能创建影响特定 DIV 的幻灯片。我也希望它垂直滑入。任何想法将不胜感激！
采纳答案by Aaron Snyder
Just wrap all your content inside a div and slide that down.
只需将所有内容包裹在一个 div 中并将其向下滑动即可。
CSS
CSS
#bodyContent {
display:none;
height: 100%;
}
HTML
HTML
<div id="bodyContent">
//all your stuff goes in here
</div>
Javascript/JQuery
Javascript/JQuery
$(document).ready(function(){
$('#bodyContent').slideDown();
});
回答by jmort253
Check out jQuery Mobile's Multi-Page Template. What it does is it separates your pages into multiple DIV wrappers in the same HTML file. With slide transitions, you don't want them to appear awkward or "hang" because of network issues, so the general idea is that the browser downloades all the content to the page and only shows the relevant part of the DOM.
查看jQuery Mobile 的多页面模板。它的作用是将您的页面分成同一 HTML 文件中的多个 DIV 包装器。使用幻灯片切换，您不希望它们因为网络问题而显得笨拙或“挂起”，因此总体思路是浏览器将所有内容下载到页面，只显示 DOM 的相关部分。
<div data-role="page" id="one">
<!-- page 1 content -->
<!-- Link to Page 2 -->
<p><a href="#two" data-role="button">Show page "two"</a></p>
</div>
<div data-role="page" id="two">
<!-- page 2 content -->
<!-- Link back to Page 1 -->
<p><a href="#one" data-direction="reverse"
data-role="button" data-theme="b">Back to page "one"</a></p>
</div>
Once your user transitions to another page, you simply use JavaScript and CSS to manipulate the style of the page so that it hides the first page and unhides the second.
一旦您的用户转换到另一个页面，您只需使用 JavaScript 和 CSS 来操纵页面的样式，以便它隐藏第一个页面并取消隐藏第二个页面。
Also, the example above uses a fadeout, so you'll also need to look at the Page Transitionspage in order to change it to use a slide-down effect.
此外，上面的示例使用了淡出，因此您还需要查看“页面过渡”页面以将其更改为使用向下滑动效果。
<a href="page-transitions-page.html" data-role="button" data-transition="slidedown"
data-inline="true" data-corners="true" data-shadow="true"
data-iconshadow="true"
data-wrapperels="span" data-theme="c"
class="ui-btn ui-btn-inline ui-shadow ui-btn-corner-all ui-btn-up-c">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">page</span>
</span>
</a>
In addition, this uses HTML5, and it is targeted mostly at mobile platforms. However, I've seen this library play nice on desktops as well.
此外，它使用 HTML5，主要针对移动平台。但是，我已经看到这个库在桌面上也很好用。
The biggest advantage of using this library is that it's more likely to be cross-compatible with other browsers, and it also uses techniques to manage transition state. In other words, your users can use the back button in the browser just like they would with a normal, Web 1.0 page transition.
使用这个库的最大好处是它更有可能与其他浏览器交叉兼容，并且它还使用技术来管理转换状态。换句话说，您的用户可以像使用普通的 Web 1.0 页面转换一样使用浏览器中的后退按钮。
回答by Dale
I found this quite interesting and had a stab at it.
我发现这很有趣，并尝试了一下。
Since everyone else can type at 50000 words a second it is similar to the answer that suggest wrapping the content in a div :)
由于其他人每秒可以输入 50000 个单词，因此类似于建议将内容包装在 div 中的答案:)
test.html
测试.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Slide Test</title>
</head>
<body>
<div class="container">
<a href="test.html" class="slide_page">Link Text</a>
<p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
<p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
<p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
<p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
<p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function(){
// hide the div on page load and use a slidedown effect
$('div.container').fadeOut(0, function(){
$(this).slideDown(500);
});
// capture link clicks and slide up then go to the links href attribute
$('a.slide_page').click(function(e){
e.preventDefault();
var $href = $(this).attr('href');
$('div.container').slideUp(500, function(){
window.location = $href;
});
});
});
</script>
</html>
