title: How can you remove the fade from jQuery Mobile's "slide" transition?
body: <p>I've tried creating my own CSS transition called 'realslide', as I want the jQuery Mobile transition to slide, not slide &amp; fade like it's current 'slide' transition performs. However, no matter what I do with my CSS or JS, the transition always fades. How can I avoid this?</p>
  
  <p><strong>EDIT:</strong> I added a JSFiddle: <a href="http://jsfiddle.net/ZqbFA/" rel="nofollow">http://jsfiddle.net/ZqbFA/</a></p>
  
  <pre><code>    &lt;style&gt;
          .realslide.in
          {
              -webkit-transform: translateX(0); opacity: 1;
              -webkit-animation-name: slideinfromright; opacity: 1;
          }
  
          .realslide.out
          {
              -webkit-transform: translateX(-100%); opacity: 1;
              -webkit-animation-name: slideouttoleft; opacity: 1;
          }
  
          @-webkit-keyframes slideinfromright
          {
              from { -webkit-transform: translateX(100%); opacity: 1;}
              to { -webkit-transform: translateX(0); opacity: 1;}
          }
  
          @-webkit-keyframes slideouttoleft
          {
              from { -webkit-transform: translateX(0); opacity: 1; }
              to { -webkit-transform: translateX(-100%); opacity: 1; }
          }
  
          .realslide.in.reverse
          {
              -webkit-transform: translateX(0); opacity: 1;
              -webkit-animation-name: slideinfromleft; opacity: 1;
          }
  
          .realslide.out.reverse
          {
              -webkit-transform: translateX(100%); opacity: 1;
              -webkit-animation-name: slideouttoright; opacity: 1;
          }
  
          @-webkit-keyframes slideinfromleft
          {
              from { -webkit-transform: translateX(-100%); opacity: 1;}
              to { -webkit-transform: translateX(0); opacity: 1;}
          }
  
          @-webkit-keyframes slideouttoright
          {
              from { -webkit-transform: translateX(0); opacity: 1;}
              to { -webkit-transform: translateX(100%); opacity: 1;}
          }
      &lt;/style&gt;
  </code></pre>
  
  <p>And then the JS to call the transition:</p>
  
  <pre><code>    &lt;script&gt;
      $(function(){
          $('div.ui-page').live("swipeleft", function() {
              var nextpage = $(this).next('div[data-role="page"]');
  
              // swipe using id of next page if exists
              if (nextpage.length &gt; 0)
              {
                  $.mobile.changePage(nextpage, 'realslide');
              }
          });
  
          $('div.ui-page').live("swiperight", function() {
              var prevpage = $(this).prev('div[data-role="page"]');
  
              // swipe using id of next page if exists
              if (prevpage.length &gt; 0)
              {
                  $.mobile.changePage(prevpage, 'realslide', true);
              }
          });
      });
      &lt;/script&gt;
  </code></pre>