0

下面是实际滑动 div 的代码，从右向左滑动工作正常，但是当我从左向右滑动时。它给了一些震动。因为

<div style="overflow:hidden;height:100px;width:100px;overflow:hidden;">
    <div class="cont" style="position:relative;width:205px;left:0px;top:0px">
      <div class="x" id="x_1" style="float:left;width:100px;height:100px;background-color:red;"></div>
      <div class="x" id="x_2" style="float:left;width:100px;height:100px;background-color:blue;"></div>
    </div>
</div>
<input type="button" value="clik me1" data-info="1" id="click1"/>
<input type="button" value="clik me2" data-info="2" id="click2"/>
<script>
    $("#click1,#click2").bind('click',function(){
     var id = $(this).data("info");
     if(id == 2) {
        $(".cont").animate({left:'-100px'},500,'linear');
     } else {
        $(".cont").animate({left:'0px'},4000,'linear');  
        //above line actually not animating from -100px to 0px , its animating to -100px to -109px and then its animating to 0px. I want to know why its happening. 
     }
    });
</script>

在下面的网址中，您可以找到脚本

我的 chrome 浏览器有问题。它不是一个有效的错误 http://jsbin.com/ukakah/2/edit

4

2 回答 2

1
于 2013-03-20T14:09:29.827 回答
0

http://jsbin.com/ukakah/5/edit

$("#click1, #click2").on('click', function() {
    var animTo = this.id=='click1' ? 0 : 100 ;
    $(".cont").stop().animate({left: -animTo },500,'linear');    
});

很好地.stop()防止动画堆积，并且使用三元运算符，这就是您所需要的。（不需要data。）

于 2013-03-20T14:11:10.743 回答