Basic usage of .animate()

Just for good measure here is the basic usage of the .animate() function. I won’t go to far into this, check out the jQuery API for more.

$("#SomeID").animate({ width: '50px' }, { duration: 500 });

This animates the id SomeID to a width of 50px over 500 milliseconds with a basic linear slide transition.

The “animation” queue. (or so I will call it)

When jquery runs the .animate() function it runs it along side other javascript. This allows me to add multiple animations to a queue and then run one after another instead of all at the same time. For example

$("#SomeID").animate({ width: '50px' }, { duration: 500 });
$("#SomeID").animate({ width: '150px' }, { duration: 500 });
$("#SomeID").animate({ width: '50px' }, { duration: 500 });
$("#SomeID").animate({ width: '150px' }, { duration: 500 });

This code will animate an id from a width of 50px to 150px to 50px to 150px one after another so I see a nice smooth slide from one stage to the next.

Now this code.

$("#SomeID").animate({ width: '50px' }, { duration: 500 });
$("#SomeID").animate({ width: '150px' }, { duration: 500 });
$("#SomeID").animate({ width: '50px' }, { duration: 500 });
$("#SomeID").animate({ width: '150px' }, { duration: 500 });
alert('hi');

Notice the alert appears to run first. This got me until I stopped to really think about the animation queue.

Take a look at this example from learning jquery

$(document).ready(function() {
  $('ul.anim_queue_example1 a').hover(function() {
    $(this).animate({ left: 20 }, 'fast');
  }, function() {
    $(this).animate({ left: 0 }, 'fast');
  });
});

This is a simple hover effect for a list menu. The problem may not be easily spotted at first but try it out. Running your mouse over the menu quickly will cause the queue to fill up with animations and continue running them long after you stop. More then likely not the desired effect.

Brandon Aaron was easily able to fix this by adding a simple .stop() to the functions.

This now gives you this code

$(document).ready(function() {
  $('ul.anim_queue_example2 a').hover(function() {
    $(this).stop().animate({ left: 20 }, 'fast');
  }, function() {
    $(this).stop().animate({ left: 0 }, 'fast');
  });
});

Adding the .stop() function will stop the current animation in the queue before running the next animation and will fix the problem.

Ok, now for the example problem that does not get fixed by calling .stop().

For the next example I am going to be using thepause plugin by Johnathan Howard and posted below

$.fn.pause = function(milli) {
  milli = milli || 1000;
  return this.queue("fx",function(){
    var self = this;
    setTimeout(function(){$.dequeue(self);},milli);
  });
};

Now check out the following:

$("#SomeID, #SomeID2").animate({ width: '50px' }, { duration: 500 }).pause(350);
$("#SomeID, #SomeID2").animate({ width: '150px' }, { duration: 500 });
$("#SomeID, #SomeID2").animate({ width: '50px' }, { duration: 500 }).pause(350);
$("#SomeID, #SomeID2").animate({ width: '150px' }, { duration: 500 });
$("#someID3").hover(function() {
$("#SomeID , #SomeID2").stop().height(50).width(50).animate({ width: '150px' }, 500);
} , function() {
$("#SomeID ").stop().animate({ width: '50px' }, 200);
$("#SomeID2").stop().animate({ width: '50px' }, 200);
});

This example will stop the current animation but when that short pause ends it will continue with the queue and mess with the desired animated effects. To stop this problem is actually pretty easy. To solve it change .stop() to .stop(true, false). This is because in .stop(true, false) the first true is the clearQueue parameter. This will clear all queued actions for the object. Meaning that all the future animations, once delayed, are now removed and will not interfere with the hover event.

More problems

1 more problem I have not looked into solving put probably will have to eventually is the problem of keeping those animations until after the hover is finished. Not every time will I want to completely clear the queue. I could see it being likely that I would want to do something more like the following:

$("#someID3").hover(function() {
$("#SomeID , #SomeID2").pauseQueue().animate({ width: '150px' }, 500);
} , function() {
$("#SomeID , #SomeID2").stop().animate({ width: '50px' }, 200).startQueue();
});

You may be loading the jQuery library like so:

<script src="http://jqueryjs.googlecode.com/files/jquery-1.4.2.min.js" type="text/javascript"></script>

Well if you are then you are doing it wrong.

It was ySlow that told me why. Try changing that one line to the following and take another look at ySlow.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Notice the difference? Google is now gzipping the library when its called from googleapis.com instead of googlecode.com thus lowering the files size drastically.

For those of us that are to lazy to try it out here is the result with the googleapis.com loaded instead of the googlecode.com.

You can see instead of downloading 57.2kb that you would with the googlecode file the gzip compression brings it down to 19kb.

The same rule would apply for other libraries that are hosted by google. such as mootools, or even the jQuery UI.

So next time you go to include the library make sure to do it the right way.

Now I just need to switch all the sites I have that are using it.. such as this one.

You can view live demos on iSearchNotes.com or at the plug-in webpage.

In order to create our rounded corners you will of course first need jQuery. If you do not already have jQuery hurry up and go download it at jquery.com. I will wait.

Waiting…

Ok so now you will also need to download the rounded corners plug-in. This small jQuery script can be downloaded by saving this file jquery.corner.js

Now we have all that will will need to round those corners. On the page you wish to have the rounded corners on you must add includes to both javascript files.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>

Now we must tell jQuery which areas of the layout to round.

<script type="text/javascript">
$(function(){
$("#content").corner()
});
</script>

<div id="content">Hello this would have rounded corners</div>

This simply uses jQuery’s selectors to select the id content and rounds all 4 of that divs corners by the default amount.

This plug-in can do so much more then this example. You can pick which corners to round, how much to round by, how to round, and much, much, more. Instead of listing them all check out the plug-in page to see more uses of it. (there are some pretty cool ones near the bottom of the page)

There are many different ways to use it but some of the more common uses would be:

	$("#content").corner()
	$("#content").corner("bottom");
	$("#content").corner("top");

You could always avoid javascript altogether and do it the hard way using css.