jQuery Mobileでページ切替時にアニメーション効果を加える

jQuery Mobileでは、ページ切替時にアニメーション効果を加えることができる。具体的には、”fade”,”pop”といった効果が用意されている。サンプルはここで確認することができる。

• HTMLでの実現
  a要素内に data-transition属性を追加する。

  <!-- HTML -->
  <!-- ページ：#pgTTStationList に遷移するときに slide 効果を加える -->
  <a href="#pgTTStationList" data-transition="slide">
  

• コードでのページ切替時に実現
  ページをコードで切り替えるメソッド $.mobile.changePage() のオプションを指定する。

  // JavaScript
  $.mobile.changePage($('#pgTTStationList'), { transition : 'slide' });
  

• デフォルトのページ切替効果を変更
  グローバル設定の defaultPageTransition を指定する。

  // JavaScript
  $(document).bind("mobileinit", function(){
    $.mobile.defaultTransition = "slide";
  });
  

• 実行例：
  ・路線一覧－駅一覧－駅時刻表
  ・路線一覧－列車一覧－列車時刻表
  のページ切替を「slide」とし、右から左にページが移動する感じにしてみた。
  xttview03.html