Javascript Jquery设置动画直到满足条件

每次单击

product prev按钮

，我都有以下代码来移动

product details内容

div by

100%

。这段代码运行良好，只是它一直在滚动。当

marginLeft

大于

-400%

时，我希望它停止滚动。我可以在某个地方引入一个条件使它工作吗

$(document).ready(function(){
    $("#product-prev-button").click(function(){
        $("#product-details-content").animate({
            marginLeft: '-=100%'
        });
    });
});

只要使用计数器

var MAX_CLICKS = 4;

$(function() {
    var clickCounter = 0;

    $("#product-prev-button").click(function() {
        // only move -100% if we are under or at 4 clicks (-400%)
        if (++clickCounter <= MAX_CLICKS) {
            $("#product-details-content").animate({
                marginLeft: '-=100%'
            });
        }

        // do other stuff regardless ...
    });
});

var MAX_CLICKS=4；
$（函数（）{
var-clickCounter=0；
$（“#产品预览按钮”）。单击（函数（）{
//只有在点击次数少于或达到4次时才移动-100%（-400%）
如果（++clickCounter，我可以通过对“MGA”提供的代码进行轻微修改来让它工作

$（文档）.ready（函数（）{
$（“#产品预览按钮”）。单击（函数（）{
var-prevvalue1=parseInt（$（“#产品详细信息内容”）.css（‘左边距’）；
var prevvalue2=parseInt（$（“#产品详细信息内容”）.outerWidth（）；
var prevvalue=-（prevvalue1/prevvalue2）；
如果（前值<.75）
{
$（“#产品详细信息内容”）。动画({
边际收益：'-=100%'
});
}
});               

})
是的，我在ES6宣传中。对不起：。默认情况下，.animate运行400ms，因此当您第一次单击时，它会将边距设置为小于其自身的-400%。因此，如果条件失败，则第二次进行测试。要测试它，请将初始边距左侧值设置为更高的值，如2000，并看到动画停止，直到达到该值，动画不会在中间停止n值，就像它在步骤中发生的那样，它将完成该步骤，该步骤可以将左边的边距设置为小于-400%，或者减少动画值以一次过获得-400。假设初始边距为0，将边距设置为“-=30%”，这将使其达到-405。最接近您需要的。我认为上面的代码发生了什么：th变量'value'的值在px中不是%。因此'value>-400'不起作用。不，我使用了“parseInt”，所以这不是问题所在，或者如果您可以将完整的HTML粘贴到此处以获得更好的详细信息或共享您的代码会更好。我不知道我是否错了，但我认为parseInt只给出了整数值。因此“var value=parseInt（$）#产品详细信息内容“）.css（'margin-left'）；”只是给出了600（对于600px）这样的值。它不接受%中的左边距。
    $("#product-prev-button").click(function(){
             var value = parseInt($("#product-details-content").css('margin-left'));                                  
             console.log(value);
             if(value > -400)
             {
                $("#product-details-content").animate({
                    marginLeft: '-=100%'
                });
             }

            });               
        });

$(document).ready(function(){
$("#product-prev-button").click(function(){
    var prevvalue1 = parseInt($("#product-details-content").css('margin-left'));
    var prevvalue2 = parseInt($("#product-details-content").outerWidth());
    var prevvalue=-(prevvalue1/prevvalue2);
    if(prevvalue < .75)
    {
        $("#product-details-content").animate({
        marginLeft: '-=100%'
         });
     }
 });