Question

我有这段代码：

$(document).ready(function(){

    $(".subscriptions").click(function (){

        if($(".pollSlider").css("margin-right") == "-200px"){
            $('.pollSlider').animate({"margin-right": '+=200'});
            }else{
            $('.pollSlider').animate({"margin-right": '-=200'});
            }
        });

//other exceptions

if($(".pollSlider").css("margin-right") > "200px"){
    $(".pollSlider").css({'margin-righ':'200px'});
    }
if($(".pollSlider").css("margin-right") < "0px"){
    $(".pollSlider").css({'margin-righ':'0px'});
    }
 });

这是css：

.pollSlider{
    overflow: auto;
    top:0px;
    position:fixed;
    height:100%;
    background:red;
    width:200px;
    right:0px;
    margin-right: -200px;
    z-index:100;
}

我有一个div，当用户点击一个按钮时，div从左侧200px滑入屏幕，当用户再次点击同一个按钮时，div动画到右侧200px。这个系统工作得很好，但问题是，如果用户在div左右动画时一直点击，div会在屏幕外侧（右侧）显示动画，并且当用户再次点击时不会再次返回。所以我尝试添加//其他异常，但那些if语句不起作用。我该如何解决这个问题？

Answer 1

我创建了一个 Demo ，我试图达到你想要产生的效果。正如评论中所提到的，jQuery .stop(…)用于在开始下一个动画之前清空动画队列。

我还将单位从亲戚（+=200和-=200）更改为固定数字（0和-width）。如果你假设动画将在中游停止并且你需要动画回来，你需要使用固定数字，或者在每个新动画之前动态进行计算。

Answer 2

我对这类问题的解决方案是添加一个全局变量，并在用户点击后将其设置为false，并在动画完成后将其设置为tru：

var allowAnimate = true;
$(document).ready(function(){

$(".subscriptions").click(function (){
    if(allowAnimate){
    if($(".pollSlider").css("margin-right") <= "-200px"){
        allowAnimate = false;
        $('.pollSlider').animate({"margin-right": '+=200'}, function(){allowAnimate = true});
        }else if($(".pollSlider").css("margin-right") >= "200px")){
        $('.pollSlider').animate({"margin-right": '-=200'}, function(){allowAnimate = true});
        }
    }
    });

//other exceptions
....

因此，如果用户单击按钮，则检查变量allowAnimate是否为true，我将其设置为false，动画将开始，在动画回调函数中我设置了它回到true。

div快速点击屏幕外的动画

2 个答案: