I am trying to load a page with transition effect on click of a link. I have used jQuery Mobile. Below is my code.
<a href="index.html" data-transition="slide">Transition</a>
On click of Transition link index.html page should be loaded showing transition effect.
Below is the output of index.html that I am trying to load.
But problem is that when I click Transition link the index page is not loaded as expected. The loaded page looks like below.
When I looked through firebug what is happening, I found that instead of loading complete page what transition is doing that it is putting output of linked page( i.e index.html) into first page and applying css of first page to it.
I want transition to load index page properly with its all css not to embed it into the page link is called from.
Can you please tell me how to achieve this.
In JQM by default when you link to another page JQM looks for the first JQM page (without any of the scripts or styles on that page)on that page (data-role="page") and then via ajax pulls it and enhances it and attaches it to the DOM of the current page. If you want to fully load the second page instead then you need to either set ajax-enabled to false (this is a global setting) or on the link to the second page add the attribute data-rel="extrenal".
Add in your html link tag the following attribute: rel="external"
<a href="index.html" data-transition="slide" rel="external">Transition</a>
来源：https://stackoverflow.com/questions/12408506/jquerymobile-page-transition-not-loading-page-as-it-should