Comment faites glisser une page entière à la charge avec jquery

J'aimerais glisser ma intégralité de la page vers le bas quand il est changé. Je suis en train de penser à la façon de le faire sera de créer un glissement vertical qui se joue lorsqu'un lien est cliqué, et à nouveau lorsque le chargement de la page? Jusqu'à présent, j'ai seulement été en mesure de créer une diapositive qui affecte un particulier DIV. J'aimerais aussi le faire glisser à la verticale. Toutes les idées seront grandement appréciés!

OriginalL'auteur Bridget Kilgallon | 2012-04-15

  1. 1

    Juste envelopper la totalité de votre contenu à l'intérieur d'un div et faites glisser vers le bas.

    CSS

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

    HTML

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

    Javascript/JQuery

    $(document).ready(function(){
   $('#bodyContent').slideDown();
});
    parfait! Je pense que j'aimerais aussi provoquer la page glisser vers le haut lorsque le lien vers une nouvelle page est cliqué. Voici ce que j'ai pour que: $("un.switchpage").click(function(e) { e.preventDefault(); linkLocation = ce.href; $("#container").slideUp(1000, redirectPage); cependant à l'origine de la page d'arrêter de charger entièrement. Je pourrais mettre dans le mauvais endroit dans le code. Je suis assez nouveau à cela.
    Son la preventDefault() de la première partie, qui est la "cause la page pour arrêter le chargement d'", eh bien, si vous voulais juste reprendre, il suffit d'ajouter "return true" avant l'accolade fermante de la fonction.

    OriginalL'auteur Aaron Snyder

  2. 0

    J'ai trouvé cela très intéressant et a eu un coup de poignard.

    Puisque tout le monde peut taper à 50000 mots par seconde, il est similaire à la réponse que suggèrent emballage le contenu dans un 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>

    OriginalL'auteur Dale

  3. 0

    Découvrez jQuery Mobile Multi-Modèle de Page. Ce qu'il fait c'est qu'il sépare vos pages en plusieurs DIV wrappers dans le même fichier HTML. Avec des transitions entre les diapositives, vous ne voulez pas qu'ils semblent maladroit ou "accrocher" en raison de problèmes de réseau, de sorte que l'idée générale est que le navigateur ils telecharges tout le contenu de la page et ne montre que la partie pertinente de la 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>

    Une fois que votre utilisateur passe à une autre page, il vous suffit d'utiliser du JavaScript et du CSS pour manipuler le style de la page de sorte qu'il cache la première page et d'afficher /masquer la deuxième.

    Aussi, l'exemple ci-dessus utilise un fadeout, de sorte que vous aurez également besoin de regarder le Les Transitions De Page page afin de modifier pour utiliser un glisser vers le bas effet.

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

    En outre, il utilise HTML5, et elle s'adresse essentiellement à des plates-formes mobiles. Cependant, j'ai vu cette bibliothèque jouer bien sur les ordinateurs de bureau ainsi.

    Le plus grand avantage de l'utilisation de cette bibliothèque est qu'il est plus susceptible d'être contre-compatible avec d'autres navigateurs, et il utilise également des techniques pour gérer la transition de l'état. En d'autres termes, les utilisateurs peuvent utiliser le bouton précédent du navigateur tout comme ils le feraient avec un normal, le Web 1.0 page de transition.

    OriginalL'auteur jmort253