O'Reilly logo

jQuery Mobile Cookbook by Chetan K Jain

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Using JS to create a slide and fade page transition

In the previous recipe, you learned to add a custom transition to your jQuery Mobile app using CSS. You can also create custom transitions using JavaScript. This recipe shows you how to create a "slidefade" (slide and fade) effect during page transition in your app by using JavaScript.

Getting ready

Copy the full code of this recipe from the code/02/custom-js-transition sources folder. You can launch this code using the URL http://localhost:8080/02/custom-js-transition/main.html.

How to do it...

Carry out the following steps:

  1. Create the customtransition.js JavaScript file and define your custom transition by adding a mycustomTransition() method, as shown in the following code snippet. Here, define ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required