Question

I have the following code:

<div data-role="page" id="Page1" >

   <!-- Footer here -->
      <div data-role="footer" data-position="fixed" data-id="id-footer1">
         <div data-role="navbar">
            <ul>
               <li><a href="#Page1" class="ui-btn-active ui-state-persist">Page1</a></li>
               <li><a href="#Page2" data-transition="pop">Page2</a></li>
            </ul>
         </div>
      </div><!-- /footer -->
</div><!-- /page -->

<div data-role="page" id="Page2" >

   <!-- Footer here -->
      <div data-role="footer" data-position="fixed" data-id="id-footer1">
         <div data-role="navbar">
            <ul>
               <li><a href="#Page1" >Page1</a></li>
               <li><a href="#Page2" data-transition="pop"class="ui-btn-active ui-state-persist">Page2</a></li>
            </ul>
         </div>
      </div><!-- /footer -->
   </div><!-- /page -->

The above codes will work if I use the following scripts. That is, Page 1 will have the Slide effect and Page 2 the Pop effect.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

However, when I used the following, the slide effect and pop effect are gone.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

Seems like the new JQM version has affected the page transition or am I missing something? Can anybody confirm?

Thanks.

Answer 1

Read the transitions section in the announcement of 1.1.0:

Unfortunately, after a ton of work, we’ve determined that it’s not possible to dumb down
page transitions enough to get acceptable performance in Android 2.x, even on a newer device
like a Nexus S running 2.3. After a lot of deliberation, we’ve decided to use a feature test
for 3D transforms to target transitions: if a browser passes, it will see the full range of
transitions. By default, if a browser fails this 3D test, they will fall back to a fade
transition, regardless of the transition specified. All Android 1.x-2.x devices fail this
test but Android 3.x and 4.x pass. The fallback behavior for each transition is completely
configurable if you want to change this behavior.

If your testing browser doesn’t support 3D transforms you will get a fade transition.