In this post I'm going to show you some nice effects that can be applied to images using jQuery. As you will see, the precess behind image effects requires only the animate() method and a couple of CSS properties to be passed to it. Suppose that we have an image and we want to animate it by adding some effects. The first thing to do is to set up the contextual environment where these effects should take place. In our case, just a few lines of CSS code:
#gallery {
width: 615px;
margin: 2em auto;
height: 410px;
}
#gallery img {
width: 300px;
height: 205px;
display: block;
margin: 0 auto;
}
Our image has been centered inside its container and turned into a block-level element. Also notice that the container itself has its dimensions set to values that will fit the original dimensions of the image once our effect will be complete. Now we can add jQuery:
$(document).ready(function() {
$('#run').click(function(e) {
$('#gallery img').animate({
width: '615px',
height: '410px',
opacity: '0.5'
}, 'slow', function() {$(this).animate({width: '300px', height: '205px', opacity: 1}, 'slow');});
e.preventDefault();
});
});
Our image will be first made larger and taller, and its opacity will be set to 0.5 (semi-transparent). Then, when this first effect is complete, we attach a callback function to the animate() method so that our image will return to its normal values.