jquery animer vers une nouvelle page

Existe-t-il un moyen d'utiliser jquery.animate pour charger une page avec ajax et quand il est prêt à l'animer pour glisser vers le haut ou sur le côté? Alors disons im dans la page index.html et je veux aller à la page about.html, il va d'abord le charger et quand il est prêt au lieu de rafraîchir la nouvelle page, il va l'animer en utilisant cette méthode: http://demos.flesler.com/jquery/localScroll/#section4c jquery animer vers une nouvelle page

function(){ 
$("#go2About").click(function(){ 
    $('about.html').animate({ 
     //animate the new page here 
    }); 
});

ce sera une sorte d'un code d'exemple de la façon dont il anime

Source

2012-06-07 lomas09

Pour ce que ça vaut, je n'ai pas encore trouvé une situation où c'est * souhaitable. * – Blazemonger

Vous pouvez utiliser quelque chose comme cette logique:

<!DOCTYPE> 

<html> 
<head> 
    <title>Test</title> 

    <script type="text/javascript"> 
     function loadIt() { 
      $.ajax({ 
       url: "about.html", 
       cache: false, 
       success: function (data) { 
        $("#content").empty(); 
        $(data).hide().appendTo($("#content")).slideDown(); 
       }, 
       error: function() { 
        alert("something went wrong"); 
       } 
      }); 
     } 
    </script> 
</head> 
<body> 
    <input type="button" id="button1" value="Load About" onclick="loadIt();" /> 

    <br /> 

    <div id="content" style="width: 400px; height: 400px; border: 1px solid #000;"> 

    </div> 
</body> 
</html>

Mais il suffit de savoir que le contenu de « about.html » ne devrait pas être un document HTML complet - il devrait être quelque chose qui va dans un corps < > élément. Une méthode plus simple pourrait être d'utiliser un iframe (caché quand il n'a pas de contenu) - lorsque vous cliquez sur le bouton, javascript a mis l'attribut src de l'iframe à "about.html", puis utilisez slideDown() pour l'animer étant "chargé". De cette façon, "about.html" peut être un document HTML complet et vous n'avez pas à vous soucier de quelque chose comme ça.

Source

2012-06-07 19:25:41 Ian

À quoi sert $ (data) .hide() '? Cette ligne aurait pu être aussi simple que - '$ (" # content "). Html (data) .slideDown();' - De cette façon, vous n'avez pas besoin d'effacer le contenu en premier. – Lix

ok cool ... merci – lomas09

qui ne fonctionnera pas. le hide() s'assure que le contenu que vous mettez dans la div ne sera pas affiché immédiatement. si vous le faites à votre façon, l'appel de .html (données) met immédiatement le contenu à l'intérieur de la div (et il est visible), puis l'appel de slideDown() ne fait rien ... – Ian

Vous pourriez avoir le même effet que pas vraiment rafraîchir la page. Par exemple, si vous encapsulez chacun des éléments HTML de votre page dans un élément wrapper <div>, vous pouvez simplement animer ces div wrapper dans et hors du port d'affichage des utilisateurs pour créer l'effet des transitions de page.

Vos appels AJAX peuvent remplir l'élément <div> correspondant aux pages HTML et, une fois chargés, vous pouvez appeler la fonction .animate() pour permuter les pages.

Source

2012-06-07 19:18:05 Lix

donc vous voulez dire le chargement de chaque page dans son propre div dans la page d'index, puis animer ceux-ci? – lomas09

Oui .. l'appel ajax remplira la div correcte, puis vous utiliserez le rappel pour animer la page en cours et la nouvelle page dans ... – Lix

jquery animer vers une nouvelle page

Répondre

Questions connexes