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>

以下のURLでスクリプトを見つけることができます

Chromeブラウザに問題があります。有効なバグではありません http://jsbin.com/ukakah/2/edit

4

2 に答える 2

1

この行を変更します

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

に

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

アニメーション化する前に左側のプロパティを変更しているため、ジャンプします。

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

于 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 に答える