如何在不同页面之间创建动画页面转换？

test1.html test2.html test3.html

我要链接到test1.html和test2.html到test1.html test3.html

使用页面定位符和内置页框，我遇到了从test1到test3时，它也通过test2滚动的问题。

我发现了一些很酷的称为jquery移动页面转换（http://jquerymobile.com/demos/1.0/docs/pages/page-transitions.html），但每次它会告诉我无法加载页面。然而，这正是我想要的。对于我想要创建的每个按钮/链接，可以选择不同的页面过渡（我可以在滑动顶部，左侧，下部等之间进行选择）。

如果有一种方法可以在CSS中做到这一点真棒！

来源

2013-06-11 user2457563

'从test1到test3，它也通过test2滚动。'这是什么巫术？ – dezman

请注意，jquery mobile通过使用ajax调用加载下一页的页面内容来工作。这可能会也可能不会是理想的。 – nullability

如果您想使用jQuery移动转换，为什么不使用它们？ – Brad

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/ 看看这里与滑下您可以解决一点点这个教程加载整个页面的ajax加载的下拉或淡入。只有CSS我认为这是不可能的。

来源

2013-06-11 21:22:35 Froxz

不是确切的代码，但应该让你开始。

$(document).ready(function(){ 
    $('body').fadeIn(); 

    $('a').click(function(e){ 
    window.goto=$(this).attr("href"); 
    $('body').fadeOut('fast',function(){ 
     document.location.href=window.goto; 
    }); 

    e.preventDefault(); 
    }); 
});

CSS：

body{display:none;}

要知道，如果你使用的是其他jQuery插件需要知道一个元素的高度，他们很可能会中断，因为该元素将不会有一个高度直到fadeIn完成。您可以通过使用visible：hidden来代替display：none来执行初始隐藏。

来源

2013-06-11 21:35:07

如何在不同页面之间创建动画页面转换？

回答

相关问题