I have two html pages: Page1.html, Page2.html. I would like to slide between the two pages. I have found a lot of plugins and solutions to slide between two divs or slide within a container but what I need is a complete page change.
I found something but the problem is that jquery code on page2 does not fire when the page loads. I could use jQuery mobile but my project uses jQuery ui and it gives me some conflicts... so I need something else.
The project is supposed to run on iPad so it would be cool to have sliding pages that you can drag. But I would be happy to just find a plugin for the slide.
Thank you.
You have few solutions, like using Ajax for adding content to "new pages" and add some sliding effect with jQuery. There is some topics about that on Stack Overflow:
slide between pages using jQuery
Clues on sliding between pages effect
Or just add some effect on page ready like in this sample:
<html>
<head>
<script src="js/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function(){
$('body div').slideDown();
});
</script>
</head>
<body>
<div style="width: 400px; height: 400px; background-color: blue; display: none;">
<a href="page2.htm" style="color: white;">PAGE 2>></a>
</div>
</body>
<html>
<head>
<script src="js/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function(){
$('body div').slideDown();
});
</script>
</head>
<body>
<div style="width: 400px; height: 400px; background-color: red; display: none;">
<a href="page1.htm" style="color: white;">PAGE 1>></a>
</div>
</body>
Good luck!
I was looking for a full page transition vs. many examples that show one page with a couple of DIVs. I found that Animate.css does the trick very well.
来源：https://stackoverflow.com/questions/14316402/js-or-css-page-slide-transition-between-2-full-pages