List element slide in links
I have the following HTML...
-
<div id="files">
<ul id="filelist">
<li>
<a href="/image/b/" title="Uploaded on 02-09-2009 at 5:53 PM BST">delle4200_1.png<span class="size">34.6 KB</span></a>
</li>
<li>
<a href="/image/a/" title="Uploaded on 02-09-2009 at 5:51 PM BST">delle4200.png<span class="size">34.6 KB</span></a>
</li>
<li>
<a href="/image/9/" title="Uploaded on 02-09-2009 at 5:50 PM BST">jenniferlopezwallpaper18_2.jpg<span class="size">289.63 KB</span></a>
</li>
<li>
<a href="/image/8/" title="Uploaded on 02-09-2009 at 5:50 PM BST">jenniferlopezwallpaper12_1.jpg<span class="size">222.9 KB</span></a>
</li>
<li>
<a href="/image/7/" title="Uploaded on 02-09-2009 at 5:44 PM BST">jenniferlopezwallpaper12.jpg<span class="size">222.9 KB</span></a>
</li>
<li>
<a href="/image/6/" title="Uploaded on 02-09-2009 at 5:43 PM BST">jenniferlopezwallpaper18.jpg<span class="size">289.63 KB</span></a>
</li>
<li>
<a href="/image/5/" title="Uploaded on 02-09-2009 at 5:43 PM BST">jenniferlopezwallpaper13.jpg<span class="size">254.24 KB</span></a>
</li>
</ul>
</div>
It is of course a list with ID #filelist.
Inside each list item is an <a> (display:block in CSS) and inside that floated to the right is a <span class="size">.
Looks like this:
http://img.pixady.com/list1jpg.jpg
Now, what I want to happen is this...
When the user hovers their mouse over the <a> inside the list item I need the <span class="size"> to sort of slide to the left a bit and another span to be inserted where the current one is (fade in)... This new span will have links like "Share", "Bookmark", etc inside of it.
How would I go about doing this?
Thanks
