删除JQuery Mobile上的默认淡入淡出过渡

Question

I'm developing a mobile app with Phonegap using Jquery Mobile. First I tried to normally add a transition to a < a > tag using:

    <a href="#page2" data-transition="slide">Page 2</a>

just like it's explained on JQuery Mobile documentation, but I noticed that my page was doing a fading animation before actually doing the slide, and of course it looked horrible. After that happened I thought it was because there's a default animation so I looked for ways to remove it, and I found this:

    <script>
        $(document).bind("mobileinit", function(){
        $.mobile.defaultPageTransition = 'none';
        });
    </script>

But it still isn't working. I also tried to change the default transition to slide but it didn't work either. Thanks for your time, any ideas?

Answer 1

The ordering of the mobileinit handler is important. It must go between your jQuery main file and the jQuery Mobile file

<!-- jQuery.js -->
<script type="text/javascript" src="assets/js/plugins/jquery-2.1.1.min.js"></script>

<!-- Place after jQuery.js but before jQueryMobile.js -->
<script type="text/javascript" src="assets/js/app.js"></script>

<!-- jQueryMobile.js -->
<script type="text/javascript" src="assets/js/plugins/jquery.mobile-1.4.4.min.js"></script>