Why so much jQuery

I realized that this is supposed to be a New 2 WordPress site, meaning we should be providing WordPress content, but the truth is there are so many sites out there like that already, I don't see the harm in providing a little something here and there that doesn't have to do with WordPress. Most of my posts contain something to do with jQuery, because I just love it. Plus you can easily incorporate jQuery into your WordPress site, so why not learn it, then try to use it in WP.

A cool image sliding animation

In this simple tutorial, I'll show you how to make a basic animation that includes 2 images. When you hover over the image, it will slide down and reveal the 2nd image behind it. View the demo to see what I mean.

1. First we need some CSS Styling

We want to add some styles to this, and CSS selectors that will be used later by the jQuery script.

#container {
	width: 850px;
	text-align: center;
	margin: auto;
}
.wrap {
	width: 250px;
	height: 140px;
	position: relative;
	overflow: hidden;
	float: left;
	padding: 0 1em;
	top:150px;
}
img {
	position: absolute;
	top: 0;
	left: 4px;
}

2. The HTML code

The HTML we will use is as follows.

<div id="container">

	<div class="wrap">
		<img src="back.jpg" alt="image" />
		<img src="front.jpg" class="front" alt="image" />
	</div>

	<div class="wrap">
		<img src="back.jpg" alt="image" />
		<img src="front.jpg" class="front" alt="image" />
	</div>   

	<div class="wrap">
		<img src="back.jpg" alt="image" />
		<img src="front.jpg" class="front" alt="image" />
	</div>

</div>

You will see only the front image since the CSS overlaps the 2 images with the position of absolute for the img selector.

3. The jQuery Script

First thing is don't forget to include jQuery in the page.

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

Then you can add the script, here I just embedded it in the page, since it's such a small script. Generally though you might want to include it as an external file.

<script type="text/javascript">
$(function() {
	$('.wrap').hover(function() {
		$(this).children('.front').stop().animate({ "top" : "300px"}, 700);
	}, function() {
		$(this).children('.front').stop().animate({ "top" : "0px"}, 200);

	});
});
</script>

Explained

$('.wrap').hover(function() { This adds a hover function to the 'wrap' CSS class.

$(this).children('.front').stop().animate({ "top" : "300px"}, 700);
$(this) refers to the 'wrap', getting the .children of 'wrap' that have the class 'front'. The stop() function will stop the animation when you hover off, so the animations don't build up. The animate() function makes the 'front' image move down from the top by 300px at a speed of a little less more than half a second, 700.

$(this).children('.front').stop().animate({ "top" : "0px"}, 200);
This essentially does all the same stuff as the above except it slides it back up to 0px from the top, at a speed a little faster than half a second, 200.

That's it!

You could easily find ways to incorporate this into a WordPress theme. In fact that is what I have been working on with the new CSS Gallery Styleswitching thingy thing I am making. I don't really know what to call it, but it will basically become a really really cool jQuery CSS gallery, with lots of enhancements on CSS galleries as we know them. This will be one of those things.

Any questions let me know below.