Spoonfed Project

jQuery image slide on hover effect plugin

November 14th, 2009 | jQuery

A while back I wrote about using jQuery to create an image sliding effect. It’s received quite a lot of traffic since then, so I decided to create a simple plugin.

Please see jQuery image slide on hover effect for an in depth explanation of how it works.

The function can be called with the following code:

JavaScript

$(function(){
	$('#demo1').imgslide();
});

Several options may also be passed into the plugin.

JavaScript

	$('#demo1').imgslide({
		top: '0px',
		right: '0px',
		bottom: '0px',
		left: '0px',
		duration: 200
	});

HTML

And, the HTML used. Be sure to see the demo below for additional examples.

<img id="demo1" src="http://spoonfedproject.com/wp-content/uploads/demo/jquery-slide-plugin/image-1.jpg" alt="" />

Let me know if you find any bugs or better ways to approach this.

Demo

Download