14

How To Make A Simple Image Sliding Animation With jQuery

Learn a quick and simple way to add some cool interactivity to your website. This tutorial shows how to use jQuery to make some sliding images for when you hover over them. Not every post has to be about Wordpress here, does it? ...
How To Make A Simple Image Sliding Animation With jQuery

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.

Shortlink:

Get automatic updates! Subscribe to Our RSS Feed or Get Email Updates sent straight to your inbox!

About the Author

Jared is from Boston working as a web and graphic designer. Also owns the design blog Tweeaks.com, and has designed many other websites powered by Wordpress including the New2WP theme.

Level: Demos, Noob, Rookie

User Comments

( ADD YOURS )

  1. Excellent and easy enough to implement. Thanks


  2. so simple and cleary
    nice nice


  3. Good work, Jared - that's a very nice looking effect and you've done a great job explaining it! One thing that I would probably do if I was setting up something like this is to keep it more semantic by not having markup for both the front and back images (assuming they have the same content).

    Instead, I'd do something like:

    $("#wrap").each(function(){
    $(this).prepend("");
    });

    Then it would still work for Javscript-enabled agents, without cluttering up the code for non-javascript agents. Just my two cents, but you've definitely done a great job - thanks for the tutorial!


  4. Glad you liked it, thanks for the kind words. It was more just a quick thing, that was very generic. I understand what you mean, and you have a good point.

    Thanks for the comment.


  5. Woa, it's awesome! Thanks for your contribution man.


  6. Anytime, I'm happy to help :)


  7. Thanks Jared, nothing like spicing up a website with some JQuery. Oh and good luck with your "CSS Gallery Styleswitching thingy thing" if you haven't finished it yet.


  8. I had to think for a second what thing you were referring to. That was a long time ago that I started on and finished 3/4 of, and never got around to completing the theme. Thanks though. Maybe someday I'll get to finish it, it was pretty sweet what I did get done.


  9. Thanks Jared,I really like it.


  10. Pretty neat effect when you consider how little jQuery is required.


  11. It's nice to see someone boast about something other than WordPress. I like the idea of incorporating jQuery into your site. It looks very professional and adds a nice touch to any website. Don't get me wrong; I'm also looking forward to more tutorials on WordPress as well.


  12. Jquery always amazes me,,, though thickbox features of jquery gives a very nitfy effect while used with images,,,

  1. Avatar

    Your Name
    May 17


    CommentLuv badge