JS or Css page slide transition between 2 full pages

问题

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.

回答1:

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!

回答2:

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.

Demo at this link.

来源：https://stackoverflow.com/questions/14316402/js-or-css-page-slide-transition-between-2-full-pages

标签

javascript

jquery

css3

transitions