用于页面转换的 jquery 插件答案

【问题标题】：jquery plugin for page transition用于页面转换的 jquery 插件
【发布时间】：2012-09-14 06:13:31
【问题描述】：

我正在为 iPad 编写一个简单的 HTML5 应用程序，并且我正在寻找一个用于页面转换的简单 jquery 解决方案。我知道你会推荐 jQueryMobile 但问题在于它使用 ajax 在当前页面中加载下一页然后启动转换，因此我尝试加载的页面的 css 受到干扰see my question。我也试过 this 这个插件是我一直在寻找的东西，但问题是它不适用于 iPad，而且在转换时页面闪烁很多，所以我放弃了这个选项。我发现的另一个选项是 jQTouch，但据我所知 jQTouch 仅适用于 div 的过渡效果，不知道如何将其用于页面过渡。

我想要的是，点击<a href="index.html">Transition</a>index.html 中的Transition 链接时，应该显示有过渡效果，而不会出现index.html 页面的闪烁和css 干扰。

有人可以推荐我一些插件，使用它们我可以实现页面转换，而不会在转换时干扰 CSS。

【问题讨论】：

标签： jquery-plugins css-transitions

【解决方案1】：

希望这对你有用...尽管需要 jQuery，但以下解决方案对我有用：

首先在body标签之后添加：

<div id="loading">
  <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>

然后将 div 和图像的样式类添加到您的 css 中：

#loading {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  position: fixed;
  display: block;
  opacity: 0.7;
  background-color: #fff;
  z-index: 99;
  text-align: center;
}

#loading-image {
  position: absolute;
  top: 100px;
  left: 240px;
  z-index: 100;
}

最后将此javascript添加到您的页面（最好在页面末尾，当然在关闭body标签之前）：

<script language="javascript" type="text/javascript">   
$(window).load(function() {
$('#loading').hide();   }); 
</script>

然后通过样式类调整加载图片的位置和加载div的背景颜色。

就是这样，很好用。但当然你必须在某个地方有一个 ajax-loader.gif。

试试 AJAXLoad 他们有一些很棒的 GIF 动画.. :)

【讨论】：