Scrolling between two specific pixel point

Question

This is my code:

$(document).ready(function(){
    $(".right").click(function () {
            $("p").animate({right: "-=64px"});
    });
$(".left").click(function(){
        $("p").animate({right: "+=64"});
    });

How i can make two specific pixels point, that my icons just moving between those.

This is my Fiddle

I want my icons navigate in table and anytime they arrive to the end of gray color, stop and dont move anymore. just can move inverse on the other button.

is it possible with .css("right") ? If yes, please guide me how.

Thanks.

Answer 1

Here's the fiddle : http://jsfiddle.net/VQwtp/3/

js

var movementFactor = 30;

var minWidth = $('#animSubject').width();
var maxWidth = $('#animArea').width();

$("#right").click(function () {
    var subWidth = $('#animSubject').width();
    if (maxWidth > (subWidth + movementFactor)) {
        $("#animSubject").animate({
            width: "+=" + movementFactor + "px"
        });
    } else if (maxWidth > subWidth) {
        $("#animSubject").animate({
            width:(maxWidth) + "px"
        });
    }

});
$("#left").click(function () {
    var subWidth = $('#animSubject').width();
    if (minWidth < (subWidth - movementFactor)) {
        $("#animSubject").animate({
            width: "-=" + movementFactor + "px"
        });
    } else if (minWidth < subWidth) {
        $("#animSubject").animate({
            width:(minWidth) + "px"
        });
    }
});

You can vary movementFactor to move images with required distance with one click.