jQuery动画直到满足条件

Question

我有以下代码，每次单击product-prev-button都会将product-details-content div移动100% 。 这段代码可以正常滚动，只不过可以一直滚动。 我希望它在marginLeft大于-400%时停止滚动。 我可以在某个地方引入条件以使其起作用吗？

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

Answer 1

只需使用一个计数器...

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

Answer 2

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

            });               
        });

Answer 3

通过稍微修改“ MGA”提供的代码，可以使其工作。

$(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%'
         });
     }
 });               

}）;