Tutorial - How to Make Android Application with Jquerymobile - Step 4 - Transition Effects

Step 4 – Transition Effects

An awesome application must have an unique transition effect, Transition effect can be applied to internal link (different page in the same html file) by using “data-transition” attribute

<a href="#anylink" data-transition="slide">Go to Page Two</a>

# There many choice for transition effect

1. Fade

<a href="#anylink" data-transition="fade">Go to Page Two</a>

Example :

2. Flip

<a href="#anylink" data-transition="flip">Go to Page Two</a>

Example :

3. Flow

<a href="#anylink" data-transition="flow">Go to Page Two</a>

Example :

4. Pop

<a href="#anylink" data-transition="pop">Go to Page Two</a>

Example :

5. Slide

<a href="#anylink" data-transition="slide">Go to Page Two</a>

Example :

6. Slidefade

<a href="#anylink" data-transition="slidefade">Go to Page Two</a>

Example :

7. Slide up

<a href="#anylink" data-transition="slideup">Go to Page Two</a>

Example :

8. Slide down

<a href="#anylink" data-transition="slidedown">Go to Page Two</a>

Example :

9. Turn 

<a href="#anylink" data-transition="turn">Go to Page Two</a>

Example :

Navigation Links:

Step 1 - Basic
Step 2 - Header, main, footer, and pages
Step 3 – Button and Navbar
Step 4 – Transition Effect and Panel