jQuery, a Love Story.

As a Flash designer and developer, for more years than I can remember, I was shocked recently to see how far JavaScript based animations and interactivity have come. After spending a couple hours with jQuery, I was hooked.

Being the Interactive Director, and Partner, I get to create all the cool stuff (ssshhh don’t tell Sean). I’m also the developer in this partnership so I do my fair share of PHP work, Database work, XHTML/CSS, etc,. However, my passion has always been in dynamic, interactive, animation based front-end work. FLASH!

Up until recently Flash, AS 3 was my weapon of choice for anything interactive or animation based. After years of developing code, I’ve compiled solutions, libraries and classes for almost any type of Flash project you can think of. So of course I would go to Flash for any work that required animation or front-end interactivity.

But let’s face it Flash is not exactly quick to develop, you have to open up the IDE and get your classes set, testing, debugging, etc,. It takes time to do all that. Flash also hinders Search Engine Optimization. I know that Google now indexes Flash, but who really believes that text embedded in Flash is as SEO friendly as text in a DIV? Not me. Not to mention you should be pulling in all your text for Flash via XML.

Enter jQuery. I can’t remember exactly who recommended jQuery to me (ok it was my partner Sean, but let’s not give him a big head), but I can say that I will never look at front-end animation, interactivity the same.

Quick, SEO friendly and just plain cool!

jQuery is quick. jQuery is lightweight and executes quickly within the page, but that’s not what I mean by quick. jQuery is quick to develop. Really quick. I find myself developing high-quality animation, interactive SEO friendly features within minutes. No need to open an IDE, just include the jQuery files and write the code. I’m astonished by the number of lines I end up writing for jQuery. With nice design touches and 10 lines of jQuery code you can make jaws drop.

As for SEO, jQuery doesn’t disturb your mark-up. No need to change your mark-up to accommodate jQuery. That means we can layout pages with lot’s of text, contained within heading, div’s and paragraph’s. What more could you ask for?

How what about a quick example?

My current favorite jQuery example is from right here on this website. It’s not the home page jQuery rotation banner, although that one is cool too, it’s the simple effect found on our Work page.

Why is this my favorite jQuery example, you ask? Because it’s only 8 lines of code and took me 5 minutes to build! When you combine a great design style / imagery to the power of jQuery, you get awesome results with little fuss.

Let’s take a look under the hood:

$(document).ready(function(){
	$("div.jq-example a").find('img:eq(1)').hide();
	$("div.jq-example a").hover(function() {
		$(this).find('img:eq(1)').fadeIn(400);
	}, function() {
		$(this).find('img:eq(1)').fadeOut(400);
	});
});

<div class="jq-example">
	<a href="/2009/07/disney-theme-parks/">
		<img src="/wp-content/themes/12ft/images/disney-small.jpg"  />
		<img src="/wp-content/themes/12ft/images/disney-small-over.jpg" />
	</a>
</div>

<div class="jq-example">
	<a href="/2009/07/fox-house/">
		<img src="/wp-content/themes/12ft/images/fox-house-small.jpg" />
		<img src="/wp-content/themes/12ft/images/fox-small-over.jpg" />
	</a>
</div>

jQuery is contained within an opening .ready function statement and a closing });. Essentially that code initializes jQuery.

The 2nd line of code looks for any DOM element div’s with a class by the name of featured-portfolio-image-alt , then looks for any “a href” link within that and selects the 2nd image within that link. jQuery then hides that image which is essentially the same as the CSS declaration of display: none; .

The code img:eq(1) refers to the 2nd image. Why does it refer to the 2nd image when it has the #1? It’s because the numbering starts at 0. So the 1st image would be found at img:eq(0).

Now the cool part, jQuery let’s us have a rollover and rollout state for our DOM objects. In this example we used an “a href link”, but it could have as easily been an img, div, or paragraph. In line #3, jQuery selects all the “a href links” (as specified above) and sets a hover function to it.

Line #4, is the code that’s executed for the selected “a href link”. By using the $(this) code we are able to select the currently hovered over “a href link”. Our find(‘img”eq(1)’) code selected the 2nd img within that link. Finally the fadeIn(400) code tells jQuery to animate in / reveal the img over 300 miliseconds, which gives us a nice animation.

Line #5 closes the hover function and starts the hover out function. Line #6 again selects the 2nd img, but this time it fades out in 400 miliseconds.

That’s it!

So no more Flash?

Ha, not likely. I would not give up Flash that easily and besides there are still plenty of cases where Flash is preferable over jQuery.

jQuery is cool for fading in and fading out, and lower level animations and functionality. However, Flash should handle the rest.

Flash does extremely well with elaborate animations, intensive interactivity, etc,. But it’s great to have other options, quicker options that can make our workflow that much more robust and streamlined. I (heart) jQuery, and they lived happily ever after.

All Posts / Featured