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.

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

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

Leave a Comment