I have seen a lot of different approaches to do the OSX dock in javascript. I was convinced it could be easier.

Html:

  1. <div id="dock">
  2.   <ul id="nav">
  3.     <li><a href="#"><img src="images/Mammooth_128×128.png" alt="Mammooth"/></a></li>
  4.     <li><a href="#"><img src="images/Mammoth_Back_128×128.png" alt="Mammooth"/></a></li>
  5.   </ul>
  6. </div>

Javascript:

  1. $(document).ready(function() {
  2.   $(‘#nav li’).hover(function() {
  3.     $(this).animate( { width: "128", height: "128" }, { queue: false, duration: 100 });
  4.   },
  5.   function() {
  6.     $(this).animate( { width: "50", height: "50" }, { queue: false, duration: 130 });
  7.   });
  8. });

Se example at the dan labs…

Note this is done for proof of concept, performance is NOT good on old computers, anyways….

Enjoy.