jquerymobileのページ遷移のような遷移
いつもお世話になっております。
jquerymobileのページ遷移のような遷移を行いたいのですが、
イメージ（スライドはしなくても可）
URL：http://billboardtop100.net/jquery_mobile/slide/slide.html
流れとしては、ページローディングしている最中、画面がオーバーレイしながら、
ローディングのアニメーション画像を表示し、
ロードが完了したら、スライドしてURL先へリンクする
というイメージなのですが（スライドはしなくても可）
ajaxとかそういう技術を使わないと、スムーズに遷移しないのでしょうか、、
以下に作ってみたサンプルを記載しますが、
単純にオーバーレイしてからリンク先へアクセスしているので、
読み込みも遅くなりますし、以下のコードだと、ロードの画像が真ん中にきません、、
そして画像を隠す動作が一瞬ちらついてしまいます、、、
html
<div id="shade"><img src="/img/ajax-loader.gif" alt="ローディング中"></div>
<section data-role="content">
<ul data-role="listview">
<li><a href="/aboutus.html" data-transition="slide">hoge</a></li>
<li><a href="sample.html" data-transition="slide">hoge2</a></li>
<li><a href="sample.html" data-transition="slide">hoge3</a></li>
</ul>
</section>
js
jQuery(function(jQuery){
jQuery("#shade").css({
opacity: '0.6',
display: 'none',
position: 'absolute',
top: '0',
width: '100%',
height: '100%',
background: '#000',
zIndex: '1'
});
jQuery("a[href]").click(function(e){
link = jQuery(this).attr("href");
if (!link.match(/#/i)) {
e.preventDefault();
jQuery("#shade").css('display', 'block');
}
});
});
カッコいいページ遷移がしたいです。。
是非ご教授下さい。
どうぞよろしくお願いします
お礼
CSSだけでこんなことできるんですね！ ありがとうございます。