title: jQuery mobile: How to create custom page transition
body: <p>I am currently developing a mobile app using jQuery/CSS/HTML and I want to add my own page transition when I click the 'back' button. But I cant find any real good tutorials online on how to do this. I want to create a custom color 'transition' or something that is noticeable so that I know the transition is actually working and the default transition is not being called</p>
  
  <p>This is what I have at the moment but it is not working and even if it was I dont think it would be noticeable enough:</p>
  
  <p>.js</p>
  
  <pre><code>function myTransitionHandler( name, reverse, $to, $from ) {
  
  var deferred = new $.Deferred(),
  reverseClass = reverse ? " reverse" : "",
  viewportClass = "ui-mobile-viewport-transitioning viewport-" + name,
  doneFunc = function() {
  
      $to.add( $from ).removeClass( "out in reverse " + name );
  
      if ( $from &amp;&amp; $from[ 0 ] !== $to[ 0 ] ) {
          $from.removeClass( $.mobile.activePageClass );
      }
  
      $to.parent().removeClass( viewportClass );
  
      deferred.resolve( name, reverse, $to, $from );
  };
  
  $to.animationComplete( doneFunc );
  
  $to.parent().addClass( viewportClass );
  
  if ( $from ) {
  $from.addClass( name + " out" + reverseClass );
  }
  $to.addClass( $.mobile.activePageClass + " " + name + " in" + reverseClass );
  
  return deferred.promise();
  }
  
  // Make our transition handler public.
  $.mobile.transitionHandlers["myTransition"] = myTransitionHandler;
  </code></pre>
  
  <p>.html for back button</p>
  
  <pre><code>&lt;a href="#" data-rel="back"  data-role="button" data-inline="true" data-transition="myTransition" data-direction="reverse"&gt;Back&lt;/a&gt;
  </code></pre>
  
  <p>Is there anything that i am missing and how would I make the transition stand out more?</p>