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 marginLeft is greater then 2800 pxs for it not do anything on click.

right now I have the part that moves the container in increments, but I’m not sure how to make the part where it does nothing after “slider_container” has a marginLeft of greater then 2800 px.

$("#left").click(function () {
    $("#slider_container").animate ({
        marginLeft: "+=700px"
    },450 );
});

I was wondering why the following doesn’t work:

if ($("#slider_container").css("marginLeft") >= 2800) {
      $("#right").click(function () {
    $("#slider_container").animate ({
        marginLeft: "-=0px"
    },450 );
});  
}
else
{
    $("#right").click(function () {
    $("#slider_container").animate ({
        marginLeft: "-=700px"
    },450 );
});  

}

Answer 1

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?