Question

$.mobile.changePage(‘#notification’, { transition: “slidedown”});

I have the code above using jquery.mobile-1.0rc2.min.js and I can see its effects (slidedown) both desktop browser and in android mobile & iphone. But when I used the latest jqm library which is jquery.mobile-1.1.0-rc.1.min.js, its effect now looks like a fade in and fade out even though I specifically put a slidedown effect. But when view it on an iphone mobile I can see the slidedown effect, you can see this change of effect in desktop or android browser.

Did they change the syntax? Does anyone know about this? or a solution for this?

Answer 1

jQuery Mobile disables 3d transitions when the view-port is greater than 1000px (I believe that’s the number). So in your desktop browser, just re-size the window to be less than 1000px wide and refresh the page, 3d transitions should work as they do on your iPhone (if you’re using a good browser like Chrome or Safari).

Setting a max width for transitions

By default, transitions can be disabled (set to “none”) when the
window width is greater than a certain pixel width. This feature is
useful because transitions can be distracting or perform poorly on
larger screens. This value is configurable via the global option
$.mobile.maxTransitionWidth, which defaults to false. The option
accepts any number representing a pixel width or false value. If it’s
not false, the handler will use a “none” transition when the window
width is wider than the specified value.

Source: http://jquerymobile.com/demos/1.1.0-rc.1/docs/pages/page-transitions.html