This uses the delay, and easing plugins for jquery. The below example includes the animation just as an example.

$('#link').click(function(){
        // Get the url of the link
		var toLoad = $(this).attr('href');

			// Do some stuff
			$(this).animate({
				marginRight: '50px',
				marginLeft: '-175px'
			}, 300, 'easeOutSine').animate({
				marginRight: '-38px',
				marginLeft: '-120px'
			}, 500, 'easeOutBounce');
			// Stop doing stuff

        // Wait 700ms before loading the url
		$(this).delay(700, function(){
			window.location = toLoad;
		});

        // Don't let the link do its natural thing
		return false;
});

First things last

First you’ll need jQuery and the color animations plugin. Add these in your footer so they load last(that’s just good practice).

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

The basic markup

The basic HTML for this example is something like the following.

<div class="widget">
<h3>Widget Title</h3>
<ul>
       <li>Item One</li>
       <li>Item Two</li>
       <li>Item Three</li>
</ul>
</div>

Hover Magic

Now for the code that makes the hover actually work. Don’t blink you might miss it.

var originalBG = $(".widget ul li").css("background-color");
  var fadeColor = "#ddd"; 

$(".widget ul li").hover( function () {
    $(this).animate( { backgroundColor:fadeColor}, 450 )
    .animate( {backgroundColor: originalBG}, 950 )
  },
  function () {}
  );

That’s it! Ok I’ll explain a bit. The first two lines are setting up some variables, this makes the code a bit cleaner but you could include the variables directly if you wanted. The first variable is the original background color set in the CSS file. The second is the background color which will fade in.

If you’re familiar with jQuery you’ll know the third line includes the selector(“.widget ul li”). Next is the actual animation. First the line items background color is faded to the whatever the fadeColor is set to. Next the background color is faded out to the original color before the mouse leaves. This is the effect I wanted, but if you want the color to fade out after the mouse pointer leaves then add the

.animate( {backgroundColor: originalBG}, 950)

line to the second empty function like so:

var originalBG = $(".widget ul li").css("background-color");
var fadeColor = "#ddd"; 

$(".widget ul li").hover( function () {
    $(this).animate( { backgroundColor:fadeColor}, 450 )
  },
  function () {
    $(this).animate( {backgroundColor: originalBG}, 950 )
  }
  );

The End

That is just a quicky, there are a different effects you can easily get from adding more animation, colors, and timing. But I’ll let you figure all that out.

I decided to build an identity around a logo I had done, which is pretty much ass backwards from the way most people would do it. The gorilla was originally for a side project but now fronts the GRUNT name which I truly believe is an appropriate name and identity for me(being the megalomaniac I am). Domain inspiration came from my friend Will, which also included several other “colorful” suggestions.

The website is built on what else but WordPress, backed up by jQuery and the usual suspects. The portfolio is still going to get attention(i.e. — I need to find all that stuff), pagination and some separation. But if I didn’t launch it, I would tinker with it for another few years. So expect a few more features and eye candy in the future.

So what about curtishenson.com?

Ch-Ch-Ch-Changes. Well just a few. I always thought this current design was a bit busy and crowded, so I’ll be opening things up and creating white space(dark space?). I’m also going to get rid of everything that doesn’t have to do with a blog or me. A reorganization of content is coming which will also probably mean some more regular posting and more RSS feeds so you can tune how high the crap pushed to your RSS reader gets.

There is also going to be a new sub-site which is going to contain all the downloads and side projects I do and maybe even a support forum as the comments are getting a little crowded for Checkmate.

New Projects

Just a quick heads up on some projects. I promise I am going to get started on Checkmate ver. 2.0, which will be light years ahead of the current version, as soon as I get some time. I’ve also started programming a lifestream/tumblelog app in ruby on rails, so look for that in the future.

They’ve recently added jQuery, and I’ve started using it with this new design. So far it is working great, but will it last? Anyone who uses Google Analytics knows that at times it can slow your page down. Although Google says this is a faster alternative to using your own server, I think the chance for slow response time is still there.

The Real Benefit

However, offloading the file to the Gibsons over at Google is not the main reason this is faster. Caching is what makes this so much faster, after the initial download, the library is cached and no longer re-downloaded at every website. For example if a user visits jQuery’s site, then visits mine, they will no longer have to wait for the jQuery library to load as it will already be cached on their computer. Obviously this only works if people start using the service. I imagine plenty of web 2.0 companies will start using the service, which will benefit everyone, and you should use it too.

Security Risks

All is not rosy though, there is some security risk when using the service. If someone was able to hack into the service(unlikely) or someone with access was to turn evil(more likely, think postal workers) they would be able to inject javscript into your site. This would be a flawless victory and fatality(<-- mortal kombat reference) for the hacker. I think there is a VERY small chance of this actually happening, so the reward well exceeds that risk.

Another point to consider is Google will have access to data about your website it may not normally have access to. This doesn’t bother me in the least as I worship at the Google temple, but for some the invasion may be more of a serious issue.

How do I use it?

Thats easy, you can either call the new script in a simple <script> tag like I am currently doing. Or use the google.load function.

Below is the script tag I use which calls the minified jQuery library. The url structure is pretty straightforward: name of the library, version, and file name. I believe using 1 as the version number gets the latest version, but I’m not 100% sure. The structure below uses a version wild card to get the latest 1.*.* version. I would recommend using the full version number for better results(see Mark Lucovsky comment).

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

The next example uses the google.load function and is straight from the Google page.

<script src="http://www.google.com/jsapi"></script>
<script>
  // Load jQuery
  google.load("jquery", "1");

  // on page load complete, fire off a jQuery json-p query
  // against Google web search
  google.setOnLoadCallback(function() {
    $.getJSON("http://ajax.googleapis.com/ajax/services/search/web?q=google&;v=1.0&;callback=?",

      // on search completion, process the results
      function (data) {
        if (data.responseDate.results &&
            data.responseDate.results.length>0) {
          renderResults(data.responseDate.results);
        }
      });
    });
</script>

For more information about the API see Google’s AJAX libraries page