Ciao ragazzi.

Ho iniziato ad implementare nelle pagine (per piattaforme mobile) jquery mobile

Sto provando anche i vari tipi di effetti di transizione ma accade qualcosa di particolare...ovvero qualunque effetto io metta mi da sempre il "fade"

codice:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>MOBILE</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<link href="main2.css"rel="stylesheet" type="text/css" media="handheld">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<title>Documento senza titolo</title>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" id="header">
<h4>My Site</h4>
</div>
<div data-role="content" id="content">


Questa è una prova mobile. Con l'ausilio di jquery mobile. Una libreria molto potente per la realizzazione di siti per piattaforme mobile</p>
Vai alla pagina numero 2
</div>
<div data-role="footer" id="footer">
<h4>powered by me</h4>
</div>
</div>

<div data-role="page" id="menu">
<div data-role="header" id="header">
<h4>My Site</h4>
</div>
<div data-role="content" id="content">


SEI FORTISSIMO. HAI CAMBIATO PAGINA</p>

</div>
<div data-role="footer" id="footer">
<h4>powered by me</h4>
</div>
</div>
</body>
</html>

Come vedete ho creato la struttura multi-pagina in una sola. Funziona tutto si vede bene ma non mi cambia l'effetto di transizione.

qui il link della mia piccola prova

Volevo apporfittare per chiedere se cmq utilizzare html 5 e jquery mobile sia forse il metodo migliore per realizzare applicazioni per mobile (visto che mi son avvicinato da poco allo sviluppo per piattaforme mobili).
Grazie in anticipo