最後のdivに達したときに.animate（）を停止する

Question

私は、各パネルが480x300（ステータスバーの場合は-20px）で、左側または右にスクロールする2つのナビゲーションボタンがあるWebアプリケーションを持っています。

表示される最大パネルをスクロールし続ける場合を除いて、すべてがうまく動作します。

Jquery .animate（）が最後のパネルに到達した後で停止できるかどうか疑問に思っていました。

http://jsfiddle.net/gS33Y/

Answer 1

Hiya 別のデモhttp://jsfiddle.net/qpHSw/またはhttp://jsfiddle.net/yEsDQ/またはhttp://jsfiddle.net/yEsDQ/show

を。

コード

var cur = 1; 
var max = $(".scroll-content ul").children("li").length; 

$("nav.back").click(function(){ 

    if (cur+1 > max) return; 
    cur++; 

    $("#panel").animate({ 
     marginLeft: "-=500px", 
    }, 1000); 

}); 

$("nav.forward").click(function(){ 
    if (cur-1 < 1) return; 
    cur--; 
    $("#panel").animate({ 
     marginLeft: "+=500px", 
    }, 1000); 

});​ 

Answer 2

それが最後のパネルである場合は、一定の値にX座標位置を制限することができます。

Answer 3

現在のディスプレイを追跡するためにカウントを使用できます。このようなものhttp://jsfiddle.net/gS33Y/3/

Answer 4

#panel要素の属性は、#panel要素の数をカウントし、移動を制限するために表示されるパネルを追跡できます。また、スライドの余白を500ピクセル（460の幅+ 20ピクセルの余白+ 20ピクセルのパディング）で増やす必要があります。

このお試しください：このサンプルは、動的にULであなたの李をカウントし、応じてアニメーションを調整

var $panel = $("#panel") 
$panel.data("slideCount", $("#panel li").length).data("currentSlide", 1); 

$("nav.back").click(function() { 
    if ($panel.data("currentSlide") < $panel.data("slideCount")) { 
     $("#panel").animate({ 
      marginLeft: "-=500px", 
     }, 1000); 
     $panel.data().currentSlide++; 
    } 
}); 

$("nav.forward").click(function(){ 
    if ($panel.data("currentSlide") > 1) { 
     $("#panel").animate({ 
      marginLeft: "+=500px", 
     }, 1000); 
     $panel.data().currentSlide--; 
    } 
}); 

Example fiddle

Answer 5

は、ウィンドウ幅終わりが近いときを検出し、右側には空白を残さないスライド5の終わりにmarginLeftを終了するためにとにかくありますか？