jon stuebe

Yesterday, chris over at css-tricks posted a new article about some cool effects one can accomplish with css3. One of them happened to be what chris calls growing links. This effect done all through css scales the anchor link and rounds the edges in a fluid animation. However, if you view this in another browser without css3 capabilities, there will be no animation at all.

I decided to take on myself to make myself this same effect with jquery.

step 1

The first thing I did was create an unordered list and put anchor links inside of each of the list items:

<ul>          <li><a href="#">link 1</a></li>     <li><a href="#">link 2</a></li>     <li><a href="#">link 3</a></li>     <li><a href="#">link 4</a></li>      </ul>

step 2

After the list of links is set up, the next step is to style it.

ul {   list-style-type: none;   margin: 44px 0 0 45px;   padding: 0;   width: 100px; } a {   display: block;   background-color: #000;   color: #fffeff;   text-decoration: none;   text-align: center;   padding: 5px 0 5px 0; } a:hover {   background-color: #5e5e5e; }

step 3

The next step is to actually animate the list items. I did this using a little jquery. Basically the idea is to change the positioning of the links to relative so that we can change some of the positioning without having to remove it from the flow of the page. The second questions you may have is why the queue is set to false. This is so that the animation does keep repeating itself if you mouse over and off quickly.

   animateTime = 250;    $("a").hover(function() {       $(this)   .css("position","relative")   .css("display","block")   .animate({           width: "120%",           left:  "-10%"   }, { queue:false, duration:animateTime } );            }, function() {   $(this)   .animate({     width:"100%",     left:"0%"   }, { queue:false, duration:animateTime } );      });

You can also find this on the downloads page.