div does not animate in jquery. why?
<p>I created a <a href="http://jsfiddle.net/pesAA/2/" rel="nofollow">fiddle</a>. I am trying to make jquery animation but when I click on the link it does not move. Why? I am using jquery transition plugin.</p>

<p>Here is my code</p>

<p>html</p>

<pre><code>&lt;header class="header"&gt;&lt;a href="#" class="click"&gt;Click&lt;/a&gt;&lt;/header&gt;
&lt;section class="contents"&gt;
  &lt;section class='home'&gt;
    Hello akdjalskdjalskdjlasklasdjasljdasök
  &lt;/section&gt;
&lt;/section&gt;
</code></pre>

<p>css</p>

<pre><code>.contents {
  width: 300px;
  height: 400px;
  border: 1px solid red;
}
.home {
  position: absolute;
  border: 1px solid green;
}
</code></pre>

<p>and js</p>

<pre><code>$('.click').click(function () {
      $('.home').transition({x: '+100px'}, function () {
        alert('completed');
      });
    });
</code></pre>

<p><strong>Update</strong></p>

<p>I am using jquery <a href="http://ricostacruz.com/jquery.transit/" rel="nofollow">transition</a> plugin</p>
