Permalink
Browse files

Updates to the animation demos

  • Loading branch information...
1 parent 6ed42d1 commit 348530e25a74dd3991bc31a170b44f7dcbbadc3d Jonathan Stark committed Mar 22, 2011
Showing with 20 additions and 26 deletions.
  1. +20 −26 demos/main/index.html
View
@@ -141,19 +141,31 @@
<a class="back" href="#">Home</a>
</div>
<ul class="rounded">
- <li><a href="#animdemo">Slide</a></li>
- <li><a class="slideup" href="#animdemo">Slide Up</a></li>
- <li><a class="fade" href="#animdemo">Fade</a></li>
- <li><a class="flip" href="#animdemo">Flip</a></li>
- <li><a class="pop" href="#animdemo">Pop</a></li>
- <li><a class="swap" href="#animdemo">Swap</a></li>
- <li><a class="cube" href="#animdemo">Cube</a></li>
- <li><a href="#reversed">Reverse animations&hellip;</a></li>
+ <li><a href="#animdemo" class="slideleft">Slide Left</a></li>
+ <li><a href="#animdemo" class="slideright">Slide Right</a></li>
+ <li><a href="#animdemo" class="slideup">Slide Up</a></li>
+ <li><a href="#animdemo" class="flipleft">Flip Left</a></li>
+ <li><a href="#animdemo" class="flipright">Flip Right</a></li>
+ <li><a href="#animations2" class="slideleft">More...</a></li>
</ul>
<div class="info">
Custom animations are also <a target="_blank" href="http://code.google.com/p/jqtouch/wiki/Animations">easy to write</a>. <br />View the source in <code>demos/customanimation</code> to see how.
</div>
</div>
+ <div id="animations2">
+ <div class="toolbar">
+ <h1>Animations</h1>
+ <a href="#" class="back">Animations</a>
+ </div>
+ <ul class="rounded">
+ <li><a href="#animdemo" class="cubeleft">Cube Left</a></li>
+ <li><a href="#animdemo" class="cuberight">Cube Right</a></li>
+ <li><a href="#animdemo" class="fade">Fade</a></li>
+ <li><a href="#animdemo" class="dissolve">Dissolve</a></li>
+ <li><a href="#animdemo" class="pop">Pop</a></li>
+ <li><a href="#animdemo" class="swap">Swap</a></li>
+ </ul>
+ </div>
<div id="animdemo">
<div style="font-size: 1.5em; text-align: center; margin: 160px 0 90px; font-family: Marker felt;">
Pretty smooth, eh?
@@ -341,24 +353,6 @@
<p><strong>Best enjoyed on a real iPhone</strong></p>
</div>
</div>
- <div id="reversed">
- <div class="toolbar">
- <h1>Reversed</h1>
- <a href="#" class="back">Animations</a>
- </div>
- <ul class="rounded">
- <li><a class="reverse" href="#animdemo">Slide</a></li>
- <li><a class="reverse slideup" href="#animdemo">Slide Up</a></li>
- <li><a class="reverse fade" href="#animdemo">Fade</a></li>
- <li><a class="reverse flip" href="#animdemo">Flip</a></li>
- <li><a class="reverse pop" href="#animdemo">Pop</a></li>
- <li><a class="reverse swap" href="#animdemo">Swap</a></li>
- <li><a class="reverse cube" href="#animdemo">Cube</a></li>
- </ul>
- <div class="info">
- Just add <code>class="reverse"</code> to reverse your animation.
- </div>
- </div>
<div id="ui">
<div class="toolbar">
<h1>UI Demos</h1>

0 comments on commit 348530e

Please sign in to comment.