javascript - 点击左右切换的时候，怎样让中间的内容可以不重叠在一起

Question

点击向右的箭头，中间的p会从右边滑出来，如果点慢点，一切正常，但是点快了的话，中间内容的第一块还没消失，第二块就出现了，就会重叠在一起。我用的是，animate，然后改变left值，怎样让第一块内容消失了，再让第二块的内容出来呢。类似slidedown的那种，是可以用stop（）这个方法，我这个里面用什么方法会比较好。

var num=0;

$('.introduce-line p').eq(0).css('display',"block");
$(".info-li").eq(0).animate({"left": "0px"}, 500);

$(".rightico").click(function(){
    num++;
    if(num==6){
        num=5;
    }
    $('.introduce-line p').css("display",'none');
    $('.introduce-line p').eq(num).css('display',"block");
    $(".info-li").css("left","-1100px");
    $(".info-li").eq(num).animate({"left": "0px"}, 500);
})

Answer 1

设置一个flag=true;
点击时判断是否为true。为true就继续
在点击之后flag=false;
动画complete之后flag=true：
.animate( properties [, duration ] [, easing ] [, complete ] )

Answer 2

在animate前加stop试试

stop(true, true).animate();