14Nov2009
Category
jQuery
Tags

jQuery image slide on hover effect plugin

jQuery image slide on hover effect plugin

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.

Update – 11/28

Plugin has been refactored, includes detailed documentation, and is compatible with jQuery Easing Plugin. ImgSlider Plugin is available at CodeCanyon.

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

Sharing is caring.
  • Subscribe to our feed
  • Share this post on Delicious
  • StumbleUpon this post
  • Share this post on Digg
  • Tweet about this post
  • Share this post on Mixx
  • Share this post on Technorati
  • Share this post on Facebook
  • Share this post on NewsVine
  • Share this post on Reddit
  • Share this post on Google
  • Share this post on LinkedIn

Discussion

13 responses to "jQuery image slide on hover effect plugin"

Leave a Comment