Question

说我有这些页面：

test1.html test2.html test3.html

我想将test1.html与test2.html和test1.html链接到test3.html

使用页面锚点和iframe，我遇到的问题是，当从test1转到test3时，它也会滚动到test2。

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

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

Answer 1

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/ 看看这里加载ajax与Slide Down 您可以使用本教程稍微加载整个页面作为下拉或淡入淡出。只有CSS我认为这是不可能的。

Answer 2

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

$(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进行初始隐藏来解决这个问题。

如何在不同页面之间创建动画页面过渡？

2 个答案: