title: How to force hardware acceleration in JQuery animations?
body: <pre><code>$("#touchmenuwrap").hide();
  $("#touchmenubutton").click(function(){
      $("#touchmenuwrap").slideToggle(200);
      });
  </code></pre>
  
  <p>How can I hardware accelerate this slideToggle and prevent flickering on mobile devices?</p>
  
  <p>I came across this markup but am unsure how to implement it, if even this is what I need.</p>
  
  <pre><code>.webkitForceHardwareAcceleration(){
      -webkit-transform:translate3d(0,0,0);
      -webkit-backface-visibility:hidden;
      -webkit-perspective:1000;
      }
  </code></pre>
  
  <p>Any help would be greatly appreciated!</p>
  
  <p><strong>SOLUTION/UPDATE:</strong></p>
  
  <p>I couldn't find any way to reliably hardware accelerate JQuery animations so I simply found the CSS3 transition equivalent and hardware accelerated that using the 3D transition hack. It removed all flickering and sped it up by about 80-90% on touch devices but to achieve a 100% smooth animation on a touch device it appears that one has to dive into more serious web app territory because 100% smooth transitions are possible (squarespace.com being an excellent example).</p>