Working with transitions and effects

One of the nice things with the jQuery Mobile framework is that we have control over the page transitions. Out of the box, jQuery Mobile supports nine (well, 10 if you count none) different transitions. These transitions are as follows:

• fade

• pop

• flip

• turn

• flow

• slidefade

• slide

• slideup

• slidedown

• none

These transitions are supported for both pages and dialogs. Using one is extremely easy. Simply declare it in your link declaration. Open up index.html and change your link for About Us to look like the following code:

<li><a href="#about" data-transition="flip">About Us</a></li>

If you want, go ahead and do that across all the pages, but at least do it for index.html right now.

Save the file and load up the project. Click on About Us and this time, instead of the basic fade, you will see the screen flip. Pretty cool, huh?

Go ahead and play around with other transitions and get a feel for how they work and find your favorite one...