creating increment button that shuts off if margin greater then 2800 pxs

Question

I\'m making a slider, and I\'m trying to figure out how I\'d program a button specifically.

I\'d like it to move left in increments of 700 pxs on click, but once the mar

Answer 1

alright, I got it working, here's the solution I came up with:

$("#right").click(function () {


if (parseInt($("#slider_container").css("marginLeft")) < -2100) {
    $("#slider_container").animate ({
        marginLeft: -2800
    },450 ); 
}
else
{
    $("#slider_container").animate ({
        marginLeft: "-=700px"
    },450 ); 

}
});

$("#left").click(function () {


if (parseInt($("#slider_container").css("marginLeft")) > -699) {
    $("#slider_container").animate ({
        marginLeft: 0
    },450 ); 
}
else
{
    $("#slider_container").animate ({
        marginLeft: "+=700px"
    },450 ); 

}
});

Answer 2

Try this:

$("#left").click(function () {
    var margin = parseInt($("#slider_container").css("marginLeft")),
        move = Math.min(700, 2800 - margin);
    if (move > 0) {
        $("#slider_container").animate ({
            marginLeft: "+=" + move + "px"
        },450 );
    }
});

In the code you just added to the question, you need to put the if inside the function for the click event. Also, animate to "-=0px", does it make any sense?