Content Sliding
<p>I have this mark up.</p>

<pre><code>&lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Page&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;section id="home"&gt;...&lt;/section&gt;
&lt;section id="about"&gt;...&lt;/section&gt;
&lt;section id="page"&gt;...&lt;/section&gt;
</code></pre>

<p>How can I animate my content?? when about link is clicked the home section moves left and disappear, then about section comes from the right, and about the page section this animation continues. consider that I want to have the reverse animation, too i.e. when s.b click home again the animation reverse and show the home section again..</p>

<p>thanks in advance</p>
