创建增量按钮，如果边距大于2800 pxs则关闭 [英] creating increment button that shuts off if margin greater then 2800 pxs

问题描述

我正在制作滑块，并且试图弄清楚如何对按钮进行专门编程.

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

我希望它在单击时以700 pxs的增量向左移动，但是一旦marginLeft大于2800 pxs，则单击时将不执行任何操作.

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.

现在我有逐步移动容器的部分，但是我不确定在"slider_container"的marginLeft大于2800 px之后如何使该部分不起作用.

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 );
});  

}

推荐答案

尝试一下:

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

在您刚刚添加到问题中的代码中，需要将if放在点击事件的function内.另外，animate to "-=0px"，这有意义吗?

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?

这篇关于创建增量按钮，如果边距大于2800 pxs则关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！