Geek Out! - WordPress tips, XHTML/CSS illumination, and adventures in jQuery

I love jQuery

The theme GeekOut, which as of this moment I am using on this site and may release once I decide to go in a different direction with the design, uses jQuery to accomplish a number of things.

1. The animations that are featured both in the navigation and the social media icons

I’m using the jQuery animate() function, which is really cool. I built a slider with it a little while back, which I’ll more than likely release and talk about here once I get the code to be a little more universal. For now, I’ll share the code for the animations at the top of the GeekOut theme.

Code:

function slideOut(obj) {
	$(obj).hover(function(){
	  $(this).animate( { "width":"120"}, 200 )
	});
	$(obj).mouseout(function(){
	  $(this).animate( { "width":"109px"}, 200 )
	});
}
function jumpUp(obj) {
	$(obj).hover(function(){
	  $(this).animate( { "bottom":"0px", "opacity": "1" }, 200 )
	});
	$(obj).mouseout(function(){
	  $(this).animate( { "bottom":"-10px", "opacity": ".4" }, 200 )
	});
}

2. Cufon

Which, as far as I can tell at this point, is the best thing out there as far as self-hosted text replacement plugins go.

More about Cufon.

3. The shadow on the sidebar elements

This code is literally two lines. I needed a shadow element that would only be applied to the sidebar elements and automatically span the element height. There was no way to do this with CSS, so JavaScript solved this problem, and jQuery made it easy.

Code:

function shadowLeft() {
	$('.widget .shadow').each(function() {
		thisHeight = $(this).parent().height() + 20;
		$(this).height(thisHeight);
	});
}

4. The category expander widget

Category Expander is a plugin we built at Out:think Group. Several of our clients had blogs with lots of categories, but wanted to highlight only a few, this plugin does just that. It uses jQuery to fade in the rest of the categories.

Do you love jQuery so much you want to take it behind the middle school and get it pregnant? Do you hate jQuery and think it’s a cheap, overused cop out? Tell me about it, but be nice.