Close and Go BackBack to Viget

Fun With jQuery’s Animate() Function

Rob Soule
Rob Soule, ON THE TOPIC OF Favorites and Tips and Tricks
Apr07 21

I'm a huge jQuery fan; there's no hiding that. For me, a designer, there is no easier JavaScript library to use and learn. I've been leaning on jQuery to do my heavy lifting for a while now, and it continues to blow me away almost every time. With each passing release, the library just gets better.

In jQuery's 1.2 release, we saw a big update to animate() function. Previous to 1.2, you could only animate absolutely positioned elements, but now the function supports most anything you could need. This includes padding, margin, font-size, relatively positioned elements, width, height, and borders. Since 1.2, I've been tinkering with numerous different examples. Below are three of my most recent. I hope you find them informative and/or helpful.

+ See Code

var navDuration = 150; //time in miliseconds
      var navJumpHeight = "0.45em";

      $('#nav1 li').hover(function() {
          $(this).animate({ top : "-="+navJumpHeight }, navDuration);            
      }, function() {
          $(this).animate({ top : "15px" }, navDuration);
      });
(Click a link!)

+ See Code

$('#nav_move').css({ 
        width: $('#nav2 li:first a').width()+20, 
        height: $('#nav2 li:first a').height()+20 
      });
      $('#nav2 li:first a').addClass('cur');
      
      $('#nav2 a').click(function() {
        var offset = $(this).offset();
        var offsetBody = $('#content').offset(); //find the offset of the wrapping div    
        $('#nav_move').animate(
          { 
            width: $(this).width()+20, 
            height: $(this).height()+20, 
            left: (offset.left - offsetBody.left) 
          }, 
          { duration: 350, easing: 'easeInOutCirc' }
        );
        $('.cur').removeClass('cur');
        $(this).addClass('cur');
        return false;
      });

+ See Code

var fadeDuration = 150; //time in milliseconds
      
      $('#list1 li a').hover(function() {
        $(this).animate({ paddingLeft: '30px' }, fadeDuration);
        $(this).children('span').show().animate({ left: -5 }, fadeDuration);
      }, function() {
        $(this).animate({ paddingLeft: '15px' }, fadeDuration);
        $(this).children('span').animate({ left: -35 }, fadeDuration).fadeOut(fadeDuration);          
      });

For any further reading on jQuery, check out:

Trey Piepmeier said on 04/07 at 12:02 PM

I love the code formatting and roman numeral line numbers you’re using here.

Tony Pitale said on 04/07 at 12:36 PM

The jQuery in Action book is a fantastic one. Yehuda Katz is one of the authors and he’s always on the irc chat if you need help.

Also of note in jQuery 1.2.3 (possibly before) animation, in sequence, will wait for the first animation to complete before going on to the next. This was a big improvement for me.

Aaron Kuzemchak said on 04/07 at 01:06 PM

I love me some jQuery!  Lately at work I’ve been using it to redo some functionality that we were originally using AJAX Toolkit for… needless to say, the jQuery solution is SO much leaner and cleaner, and is much easier for us to debug and improve.

Rob Soule said on 04/07 at 01:24 PM

@Tony - I agree. The queuing of animations is huge.

Wolf said on 04/07 at 02:20 PM

These animations look really smooth in FF3 but unfortunately feel very low ‘fps’ in FF2.

Rob Soule said on 04/07 at 02:41 PM

@Wolf - Yeah, I noticed that as well. For some reason FF2 always chokes with a heavy animation load. FF2 on the Mac is the worst, I think. it’s not as bad on the PC side, but still isn’t great. I’m looking forward to FF3 hopefully fixing a lot of these weird issues. Animations look great in every other browser even, uh oh, IE6 and 7.

Thanks for your thoughts.

tzjQuer-ee said on 04/07 at 02:52 PM

That’s what I’m talkin’bout.
Love the arrow bullets zoom/slide in.

Zach Katkin said on 04/09 at 10:55 AM

These are beautiful. Thanks for the tips!

Angel said on 04/11 at 06:51 PM

Nice effects

Webdesign said on 04/14 at 10:21 AM

Sweet effects indeed. But they are a bit slow ( it might be my PC)

Patrick Haney said on 04/14 at 01:54 PM

I hadn’t really explored the animate() function in jQuery yet, but it looks like it could be really useful in taking UI elements just a step further. The problem is, as others have mentioned, the animation is very slow in the Mozilla rendering engine (I’m using Camino). Webkit has no issues and everything is smooth.

I’m sure things will get better once Firefox 3 is available, but until then, you’re limited by animation support from different browsers.

Rob Soule said on 04/15 at 07:46 AM

@Patrick - Thanks for your thoughts. I’ve always been surprised that FF2 has the hardest time with DOM animation. It _seems_ that Mozilla has fixed these problems in FF3, which is great news for JS libraries and DOM animators.

The purpose of these animations is to enhance the user’s experience, not hinder it. I would definitely caution anyone implementing scripts including animations and/or DOM manipulation to spend a lot of time browser testing to make sure the end user experience is a good one. Worse case you could always throw a flag in your code to stop any animation from happening in FF2. jQuery’s browser and browser version utilities could make that extremely easy.

The unobtrusive way is the way of the Samurai!

Sukhdeep Padda said on 04/19 at 01:30 AM

Since I have startted using jQuery, I have been looking around for examples on possibilities with jQuery and I must say the eamples given above are nice and easy to implement as well.

Prabhdeep singh said on 05/18 at 04:15 AM

This is one of the most pleasing site’s , i’ve come across.
You ppl got good creativity,
I’m INSPIRED by the design ;-)
Cya soon. bye

Web Design Glasgow said on 05/20 at 09:21 AM

I’m a mootools fan myself, but I think it’s becoming less important which framework you use, but instead how you use it - these are nice UI treats Rob :0)

Geekrider said on 06/17 at 04:09 AM

Great work Rob!!

i was searching out for some jquery animation samples and luckily i stumbled upon here!! really cool!

Nate Dicken said on 07/18 at 08:50 AM

Cool animations!  Thanks for the inspiration :)

Website Designer Perth said on 07/19 at 09:40 PM

JQuery is cool. I recently combo’d it with shadowbox.js to make a gallery of recent projects. The cycle.js plug-in is also worth looking at for lots of ‘Flash-like’ transitions and animations.

eric said on 08/05 at 12:45 PM

First off...very cool animations. I’m trying to get the “nav2” example to work on my site and I can’t even seem to get the code you set up to work. I’m missing something I’m sure.

eric said on 08/05 at 03:28 PM

Thanks so much for your offer of help. I actually got it to work after I realized I was pointing to the wrong version of the “ease” file. I had an older version than you. Thanks so much again for a wonderful tutorial.

Rob Soule said on 08/05 at 03:40 PM

@Eric - That’s excellent news! I’m glad you got it working. Feel free to ping me if you hit another snag.

Trackback URL: http://www.viget.com/trackback/1029/

Comments for this entry were closed after 60 days.

Next entry: The Mysterious "Save For Web" Color Shift

Previous entry: Flash Player (Still) in the Works for Apple's iPhone