jquery animate不能正常工作，當我設置讓0px

下面是代碼實際滑動div，從右向左滑動工作正常，但是當我從左向右滑動。它給了一些動搖。因爲jquery animate不能正常工作，當我設置讓0px

<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

來源

2013-03-20 Kishorevarma

在Chrome 25.0.1364.172上正常工作。你使用哪個瀏覽器？ – Bigood 2013-03-20 14:05:23

我使用chrome，在chrome開發工具欄中觀察div'cont'並查看動畫到0px時剩下的屬性是如何變化的。 – Kishorevarma 2013-03-20 14:09:08

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-20 14:11:10

我錯誤地保留了那個css（{left：'0px';}），我現在編輯過了。在你的例子中，我正在接受這個動作。 – Kishorevarma 2013-03-20 14:15:28

我的系統中的chrome瀏覽器存在問題。即使沒有停止其在另一個系統相同版本的鉻的罰款。它的有線 – Kishorevarma 2013-03-20 14:19:46

改變這一行

$(".cont").css({left:'0px'}).animate({left:'0px'},4000,'linear');

到

$(".cont").animate({left:'0px'},4000,'linear');

你正在改變left屬性設置動畫，因此前跳。

jsbin編輯http://jsbin.com/ukakah/6/edit#/ukakah/7/edit

來源

2013-03-20 14:09:29

jquery animate不能正常工作，當我設置讓0px

回答

相關問題