Question

每次点击product-details-content时，我都会使用以下代码将100% div移至product-prev-button。此代码工作正常，除了它永远滚动。我希望它在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

我可以通过对＆＃34; MGA＆＃34;提供的代码进行轻微修改来实现它。

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

}）;

Jquery动画直到满足条件

3 个答案: