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.
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
.
Carry out the following steps:
Create the
customtransition.js
JavaScript file and define your custom transition by adding amycustomTransition()
method, as shown in the following code snippet. Here, define how thefrom
andto
pages should animate during the transition:function mycustomTransition( name, reverse, $to, $from ) { var deferred = new $.Deferred(); // Define your custom animation here $to.width("0"); $to.height("0"); $to...