http://jsfiddle.net/g9hmP/3/

I have a quick question.
On my website I have different width and heights of divs.
My version would be to give all the images a seperate function
e.g.
//Picture 1
$(“#pic1 div a”).hover(function(){
$(“img”, this).stop().animate({left:”-296px”},{queue:false,duration:200});
}, function() {
$(“img”, this).stop().animate({left:”0px”},{queue:false,duration:200});
});
});
———————————————————————————————————

//Picture 2
$(“#pic2 div a”).hover(function(){
$(“img”, this).stop().animate({left:”-296px”},{queue:false,duration:200});
}, function() {
$(“img”, this).stop().animate({left:”0px”},{queue:false,duration:200});
});
});

And so I would continue just because i have different width and heights on those images.
Is this the right way to do it or is there a shorter version?

Thank you in advance.

http://api.jquery.com/animate/#example-9

The updated plugin I created includes the easing functionality too:

http://codecanyon.net/item/imgslider/128727

If using my plugin, it would look something like this:

$('.demo5 img').imgslide({
	top: '-130px',
	duration: 700,
	easeIn : 'easeOutBounce',
	easeOut : 'easeOutBounce'
});

Hope that helps.

// Horizontal
$(“#horizontal div a”).hover(function(){
$(“img”, this).stop().animate({left:”-338px”},{queue:false,duration:200});
}, function() {
$(“img”, this).stop().animate({left:”0px”},{queue:false,duration:200});
});
});