用于页面转换的jquery插件

Question

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

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

有人能给我推荐一些插件吗？我可以使用这些插件来实现页面转换，而不会在转换时干扰CSS。

Answer 1

希望这对你有用。。。虽然需要jQuery，但以下解决方案对我有效：

正文标签后第一个添加此：

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

然后将div和image的样式类添加到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>

然后通过style类调整加载图像的位置和加载div的背景色。

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

试试AJAX加载他们有一些很棒的GIF动画…：）