Fun With jQuery’s Animate() Function

Rob Soule, ON THE TOPIC OF Tips and Tricks

Apr07 13

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.