首页 > 点击左右切换的时候,怎样让中间的内容可以不重叠在一起

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

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

var num=0;

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

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

在animate前加stop试试

stop(true, true).animate();

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

【热门文章】
【热门文章】