jQuery mobile ページ遷移トランジションをchrome(スマホ)で動かしたい

実現したいこと

「ノン・プログラマのためのjQuery Mobile 標準ガイドブック」という参考書のサンプル公開ページで実装されているページ遷移トランジションをchrome(スマホ)で動かしたいのですが、遷移時のアニメーションが上手く出来ません。

サンプルページ：http://www.imztry.net/jqm/chp10/10-1-1.html

※safariではこのような不具合はない

最終的にはこの参考書を流用して自分のサイトにもページ遷移トランジションを反映したいと考えていますが、そもそもサンプル公開ページでうまく動きません。

発生している問題

遷移トランジションのアニメーションが動かない。
添付の画像間「パッ」と遷移してしまう。

※safariではこのような不具合はない

メインページ
http://www.imztry.net/jqm/chp10/10-1-1.html

<!DOCTYPE html>
<html>
<head>
<title>タイトル</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<div data-role="page">
  <div data-role="header">
    <h1>トランジション</h1>
  </div>
  <!-- /header -->
  
  <div data-role="content" data-theme="e">
    <h3>popトランジション</h3>
    <p><a href="page2.html" data-transition="pop" data-role="button">pop</a></p>
    <h3>slideトランジション</h3>
    <p><a href="page2.html" data-transition="slide" data-role="button">slide</a></p>
    <h3>slideupトランジション</h3>
    <p><a href="page2.html"data-transition="slideup" data-role="button">slideup</a></p>
    <h3>slidedownトランジション</h3>
    <p><a href="page2.html" data-transition="slidedown" data-role="button">slidedown</a></p>
    <h3>fadeトランジション</h3>
    <p><a href="page2.html" data-transition="fade" data-role="button">fade</a></p>
    <h3>flipトランジション</h3>
    <p><a href="page2.html" data-transition="flip" data-role="button">flip</a></p>
  </div>
  <!-- /content -->
  
  <div data-role="footer">
    <h4>フッター</h4>
  </div>
  <!-- /footer --> 
</div>
<!-- /page -->

</body>
</html>

メインページでslideトランジションをクリックした際のリンク先
http://www.imztry.net/jqm/chp10/page2.html

<!DOCTYPE html>
<html>
<head>
<title>タイトル</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<div data-role="page" data-overlay-theme="e" data-add-back-btn="true" data-back-btn-text="戻る">
  <div data-role="header">
    <h1>遷移先</h1>
  </div>
  <!-- /header -->
  
  <div data-role="content" data-theme="b" >
    <h3>遷移先ページ</h3>
    <p>　子弟を仕としが私か長く方にいうように申し上げなり騒ぐだっでて、だから問題もないのを教えて、おれに国家を通じおいが四杯に二カ月は万日もどうしてもしてならじゃだものた。<br/>
      <a data-rel="back" data-role="button">戻る</a> </p>
  </div>
  <!-- /content -->
  
  <div data-role="footer" data-position="fixed">
    <h4>フッター</h4>
  </div>
  <!-- /footer --> 
</div>
<!-- /page -->

</body>
</html>

m.ts10806

2019/07/30 07:23

jQuery、jQuery-Mobileともバージョンがかなり古いものをお使いのようですが、一通り最新にしても動作しませんか？

m.s.2000

2019/07/30 10:46

バージョンを以下のものにしたら上手く出来ました。 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 御指摘ありがとうございました。

m.ts10806

2019/07/30 11:36

自身で回答を書き、自己解決としてください

行動規範の内容に同意します

回答1件

自己解決

バージョンを以下のものにしたら上手く出来ましたのでここに記載します。

html
1<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css&quot; />
2<script src="http://code.jquery.com/jquery-1.11.1.min.js&quot;&gt;&lt;/script&gt;
3<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js&quot;&gt;&lt;/script&gt;