How to slide an entire page on load with jquery

问题

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!

回答1:

Just wrap all your content inside a div and slide that down.

CSS

#bodyContent {
   display:none;
   height: 100%;
}

HTML

<div id="bodyContent">
    //all your stuff goes in here
</div>

Javascript/JQuery

$(document).ready(function(){
   $('#bodyContent').slideDown();
});

回答2:

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 :)

test.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>

回答3:

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.

<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.

Also, the example above uses a fadeout, so you'll also need to look at the Page Transitions page 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.

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.

来源：https://stackoverflow.com/questions/10166510/how-to-slide-an-entire-page-on-load-with-jquery

标签

jquery

load

slide