Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You should definitely use <strong>-webkit-transform</strong> rather than -webkit-transition. With that said, for cross-browser support and ease of use, I would definitely go with a plugin such as <a href="http://ricostacruz.com/jquery.transit/" rel="nofollow">jQuery Transit</a> that allows you to easily create smooth, native-like transitions and effects on iOS as well as Android and other mobile devices.</p> <p><a href="http://jsfiddle.net/5BBAt/" rel="nofollow">Example JSFiddle of jQuery Transit in action</a></p> <p>Code Example:</p> <p><strong>HTML:</strong></p> <pre><code>&lt;div class="moveMe"&gt; &lt;button class="moveUp"&gt;Move Me Up&lt;/button&gt; &lt;button class="moveDown"&gt;Move Me Down&lt;/button&gt; &lt;button class="setUp"&gt;Set Me Up&lt;/button&gt; &lt;button class="setDown"&gt;Set Me Down&lt;/button&gt; &lt;/div&gt; </code></pre> <p><strong>Javascript:</strong></p> <pre><code>$(".moveUp").on("click", function() { $(".moveMe").transition({ y: '-=5' }); }); $(".moveDown").on("click", function() { $(".moveMe").transition({ y: '+=5' }); }); $(".setUp").on("click", function() { $(".moveMe").transition({ y: '0px' }); }); $(".setDown").on("click", function() { $(".moveMe").transition({ y: '200px' }); }); </code></pre> <p>Someone else has pretty much done the hard work for you. I can't stand tinkering with CSS3 animations and this plugin does its job amazingly. I have tested this with an iPad, iPod Touch, iPhone, and Android. I love the native feel it gives.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload