有没有一种方法可以使用jquery.animate用ajax加载页面,并且当它准备好动画时可以向上或向侧面滑动吗? 因此,让我们在index.html页面中说即时消息,然后我要转到about.html页面,它将首先加载它,并且当它准备就绪而不是刷新到新页面时,它将使用以下方法对其进行动画处理: http://demos.flesler.com/jquery/localScroll/#section4c </ p>

</ code> </ pre>

这将是有关其动画方式的示例代码</ p>
     </ div>



Is there a way to use jquery.animate to load a page with ajax and when its ready animate it to slide up or to the side? So lets say im in the index.html page and I want to go to the about.html page, it will first load it and when it is ready instead of refreshing to the new page, it will animate it using this method: http://demos.flesler.com/jquery/localScroll/#section4c

         //animate the new page here

this will be some kind of an example code of how it will animate


您可以使用类似以下的逻辑:</ p>



测试</ title>

     <br>          函数loadIt(){<br>              $ .ajax({<br>                  网址:“ about.html”,<br>                  快取:false,<br>                  成功:功能(数据){<br>                      $(“#content”)。empty();<br>                      $(data).hide()。appendTo($(“#content”))。slideDown();<br>                  },<br>                  错误:功能(){<br>                      警报(“出了点问题”);<br>                  }<br>              });<br>          }<br>      &lt;/ script&gt;<br> &lt;/ head&gt;<br> &lt;身体&gt;<br>      <input type =“ button” id =“ button1” value =“加载关于” onclick =“ loadIt();” /></p> <p>     <br /></p> <p>     <div id =“ content” style =“ width:400px; height:400px; border:1px solid#000;”></p> <p>     &lt;/ div&gt;<br> &lt;/ body&gt;<br> &lt;/ html&gt;<br> &lt;/ code&gt; &lt;/ pre&gt;</p> <p><p>但是只要知道“ about.html”的内容不应该是完整的HTML文档-它应该包含在<body>元素中。&lt;/ p&gt;</p> <p><p>一种更简单的方法可能是使用iframe(当它没有任何内容时隐藏)-单击按钮时,请javascript将iframe的src属性设置为“ about.html”,然后使用slideDown()进行设置 给它“加载”动画。 这样,“ about.html”可以是完整的HTML文档,而您不必担心类似的事情。&lt;/ p&gt;<br>      &lt;/ div&gt;</p>



You could use something like this logic:



    <script type="text/javascript">
        function loadIt() {
                url: "about.html",
                cache: false,
                success: function (data) {
                error: function () {
                    alert("something went wrong");
    <input type="button" id="button1" value="Load About" onclick="loadIt();" />

    <br />

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


But just know that the content of "about.html" shouldn't be a full HTML document - it should be something that goes into a <body> element.

An easier method might be to use an iframe (hidden when it doesn't have any content) - when you click the button, have javascript set the iframe's src attribute to "about.html", then use slideDown() to animate it being "loaded". This way, "about.html" can be a full HTML document and you don't have to worry about something like that.

您可能具有相同的效果,但实际上并没有刷新页面。</ p>

例如,如果您将每个“页面” HTML都包装在包装器

</ code>元素中,则可以简单地将这些包装器div的动画放入和放出用户查看端口,以创建 页面过渡的效果。 </ p>


</ code>元素,并且一旦加载,您就可以调用 .animate()</ code>函数来交换页面。</ >
     </ div>



You could have the same effect only not actually refresh the page.

If you wrap each of your "page's" HTML in a wrapper <div> element, for example, then you can simply animate those wrapper div's in and out of the users view port to create the effect of page transitions.

Your AJAX calls can populate the corresponding <div> element with the pages HTML and once loaded you can call the .animate() function to swap pages.

Csdn user default icon