In this post I will share about a simple jquery to animate an image when hovering. basically it is using jQuery’s animate() effect. I will use this effect to make transaction when hovering the image.
Let's looks the demo in the url below :
Jquery Image Slide
Ok, I begin with html code :
<div id="vertical" class="clear"> <!-- Vertical --> <h2>jQuery image slide on hover effect (vertical)</h2> <div><a href="htmldrive.net"><img src="image-2.png" alt="" /></a></div> <div><a href="#"><img src="image-1.jpg" alt="" /></a></div> </div> <div id="horizontal" class="clear"> <!-- Horizontal --> <h2>jQuery image slide on hover effect (horizontal)</h2> <div><a href="#"><img src="image-4.jpg" alt="" /></a></div> <div><a href="#"><img src="image-5.png" alt="" /></a></div> </div> <div id="easeOutBounce" class="clear"> <!-- Horizontal --> <h2>jQuery image slide on hover effect (easeOutBounce)</h2> <div><a href="htmldrive.net"><img src="image-2.png" alt="" /></a></div> <div><a href="#"><img src="image-1.jpg" alt="" /></a></div> </div>
We have 3 main div contain image links. each image has two face, maybe it will easier when you look image below :
image-1.jpg
image-2.jpg
Then defined simple jquery.imageslide.js to make it work, you can download full source Jquery Image Slide.
jquery.imageslide.js has 3 transaction type (vertical, horizontal,easeOutBounce) and you can use it with multiple images
Now you can set up the property of image slide as below:
<script type="text/javascript">
$(document).ready(function(){
$('#vertical div a').imgslide({
width: 296,
height: 130,
animate : "vertical",
duration : 300
});
$('#horizontal div a').imgslide({
animate : "horizontal",
duration : 300
});
$('#easeOutBounce div a').imgslide({
animate : "easeOutBounce",
duration : 800
});
});
</script>
Run your code, it will work like a charm ^^.
That's all, hope it useful
Best regard,
Bayu Prawira
