title: Change in button css very slow in iOS/Android devices for Phonegap app
body: <p>I have designed a custom button using jquery mobile and css for my Phonegap mobile app.
  On clicking the button just toggles on/off states and the css class is changed.
  However the toggle/change is too slow on iPhone/iPad/Android devices.
  There is some delay in the button rendering the toggled css.
  Its actually pretty fast on desktop browsers.</p>
  
  <p>All I am doing in the code is :</p>
  
  <pre><code>$("input[id='someid']").closest('div').removeClass("buttonUp ").addClass("buttonDown");
  $("input[id='someid']").closest('div').removeClass("buttonDown").addClass("buttonUp");
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>            .buttonDown {
                  border:1px solid #000;font-weight:bold; cursor:pointer; text-shadow:0 1px 1px #000; text-decoration:none; background:#8FFFDD;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#8FFFDD), color-stop(100%,#72ccb1));background-image:-moz-linear-gradient(top, #72ccb1 0%, #8FFFDD 100%);background-image:-webkit-linear-gradient(top, #8FFFDD 0%,#72ccb1 100%);background-image:-o-linear-gradient(top, #8FFFDD 0%,#72ccb1 100%);background-image:-ms-linear-gradient(top, #8FFFDD 0%,#72ccb1 100%);background-image:linear-gradient(to bottom, #8FFFDD 0%,#72ccb1 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#8FFFDD', endColorstr='#72ccb1',GradientType=0 );color:#3D6AFF;
              }   
  
  
              .buttonUp {
                  border:1px solid #000;font-weight:bold; cursor:pointer; text-shadow:0 1px 1px #000; text-decoration:none;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#DD3B1B), color-stop(100%,#b12f16));background-image:-moz-linear-gradient(top, #b12f16 0%, #DD3B1B 100%);background-image:-webkit-linear-gradient(top, #DD3B1B 0%,#b12f16 100%);background-image:-o-linear-gradient(top, #DD3B1B 0%,#b12f16 100%);background-image:-ms-linear-gradient(top, #DD3B1B 0%,#b12f16 100%);background-image:linear-gradient(to bottom, #DD3B1B 0%,#b12f16 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#DD3B1B', endColorstr='#b12f16',GradientType=0 );color:#000000;
              }
  </code></pre>
  
  <p>I tried 'toggleClass()' but in vain,no effect on performance.</p>
  
  <p>How can I optimize this further?</p>
  
  <p>Thanks for any help.</p>