jQuery Animate and positioning elements

Question

I current have a div that has around 5 images floating left so they are side by side. Now i have this div inside a parent div with overflow:hidden and the width so that it can only fit 4 images in.

Everything works fine apart from the animation, i have two arrows for left and right, but lets say i press right twice it moves across as it would normally but then when i press left once it resets the divs normal position and continues,

$(".next").click(function(){
    $(".item_wrap").animate({right: "+=118px"}, 1500 );
    return false;
});
$(".prev").click(function(){
    $(".item_wrap").animate({left: "+=118px"}, 1500 );
    return false;
});

this is the code i am currently using.

Answer 1

...but lets say i press right twice it moves across as it would normally but then when i press left once it resets the divs normal position and continues

Well that's because you can't animate both left and right on the same element unless you actually want the element to be stretching (it won't stretch in your case though since you've probably set a static element width.) Instead you animate just one of them by adding and subtracting:

$(".next").click(function(){
    $(".item_wrap").animate({right: "+=118px"}, 1500 );
    return false;
});
$(".prev").click(function(){
    // Subtract from 'right' instead of adding to 'left'
    $(".item_wrap").animate({right: "-=118px"}, 1500 );
    return false;
});