使用 jQuery 在页面之间滑动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9518762/
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
slide between pages using jQuery
提问by Asif Syed
I have a 4 page website and I want to transition between the 4 pages with a slide effect. I don't want to do this using an #ID. I want to press a button or the link to slide to the next page. I know this can be done using jQuery and I've seen websites that do this. Please help out. Thanks in advance for all suggestions, criticisms, and comments.
我有一个 4 页的网站，我想用幻灯片效果在 4 页之间转换。我不想使用#ID 执行此操作。我想按一个按钮或链接滑到下一页。我知道这可以使用 jQuery 来完成，而且我见过这样做的网站。请帮忙。在此先感谢您的所有建议、批评和评论。
回答by jose
Check out this tutorial and example http://www.queness.com/post/356/create-a-vertical-horizontal-and-diagonal-sliding-content-website-with-jquery
Basically, you have to set your CSS and HTML to have all the panels/screens you want as divs - rows and columns.
基本上，您必须将 CSS 和 HTML 设置为将您想要的所有面板/屏幕作为 div - 行和列。
Then set a selector for each panel and bind a click event [Code from link].
然后为每个面板设置一个选择器并绑定一个点击事件 [Code from link]。
$(document).ready(function() {
//get all link with class panel
$('a.panel').click(function () {
//reset and highlight the clicked link
$('a.panel').removeClass('selected');
$(this).addClass('selected');
//grab the current item, to be used in resize function
current = $(this);
//scroll it to the destination
$('#wrapper').scrollTo($(this).attr('href'), 800);
//cancel the link default behavior
return false;
});
//resize all the items according to the new browser size
$(window).resize(function () {
//call the resizePanel function
resizePanel();
});
});
回答by Luke
I suggest using jQuery to slide your content off the screen, after that is done use AJAX to refresh the content to your new page. Set the content to the other side of the screen and use jQuery again to slide it in from that side.
我建议使用 jQuery 将您的内容滑出屏幕，然后使用 AJAX 将内容刷新到您的新页面。将内容设置到屏幕的另一侧，然后再次使用 jQuery 将其从该侧滑入。
Something like this...
像这样的东西...
<div id='wrapper'> // this has a set width and overflow hidden
<div id='content'>
your content
</div>
</div>
A user clicks on a link, animate the margin of 'content' so it goes off the page. Do your AJAX-ing, position the 'content' to the other side of the page (far enough so you can't see it), animate the margin so it will slide into view.
用户单击链接，为“内容”的边距设置动画，使其离开页面。执行 AJAX 操作，将“内容”定位到页面的另一侧（足够远以至于您看不到它），为边距设置动画以使其滑入视图。
