14Nov2009
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.






How to stop the changing of the pictures when i hover on a certain picture? Thank you
does this work on div?
Not very newbie friendly at all, couldn’t make it work. My images have different size, i don’t know what to put in my styles.css