jquery - 创建增量按钮，如果边距大于 2800 像素则关闭

Question

我正在制作一个滑块，并试图弄清楚如何专门为按钮编程。

我希望它在点击时以 700 像素的增量向左移动，但是一旦 marginLeft 大于 2800 像素，它就不会在点击时做任何事情。

现在我有以增量移动容器的部分，但我不确定如何制作在“slider_container”之后它什么都不做的部分，marginLeft 大于 2800 像素。

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

我想知道为什么以下不起作用：

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

尝试这个：

$("#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 );
    }
});

在您刚刚添加到问题的代码中，您需要将 click 事件放在if里面function。还有，animate to "-=0px"这有意义吗？

Answer 2

好的，我得到了它的工作，这是我想出的解决方案：

$("#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 ); 

}
});