jQuery animate to show and move elements
<p>Below is an small working script I've made. Have a look <a href="http://jsfiddle.net/knsgp/" rel="nofollow">here</a> </p>

<pre><code>$(document).ready(function () 
{
  $("ul li a").hover(function () 
  {
    $("span", this).fadeIn('fast');
    $("label", this).fadeIn('fast');
  },
    function () 
    {
        $("span", this).fadeOut(500);
        $("label", this).fadeOut(500);
    }
  );
});
</code></pre>

<p>What I've been trying to do is changing this effect into an animation using some simple animating functions but I'm just not getting the proper result.</p>

<p>An example of what I'm trying to do is :</p>

<ol>
<li>After hovering on <code>&lt;a&gt;</code> element, show the hidden <code>&lt;span&gt;</code> , animate its position to " left: 30px".</li>
<li>Animate the position to "bottom:100px" . </li>
</ol>

<p>I'd appreciate any suggestion, solution or tutorial related to that  .</p>
