jquery animate div左/右の条件の場合

Question

コンディションのあるdivにdivをアニメーション化するコードブロックをまとめることができましたが、私の計算はちょっと左に少し動かす必要があります。 outterWidthを試してみてくださいhttp://dev.whiteb0x.com/gallery

var width = $('#nav').width(); 
$('#nav').width(width * 2 + 20); 

$(".nav-next").click(function() { 
    var pos = $('#nav').position(); 
    var width = $('#nav-viewport').width(); 
    var width = width * (-1); 
    alert(width); 
    if (pos.left <= 0 && pos.left > width && !$('#nav').is(':animated')) { 
     $('#nav li:first').before($('#nav li:last')); 
     $("#nav").animate({"left": "-=300"}, "slow"); 
    } 
}); 

$(".nav-prev").click(function() { 
    var pos = $('#nav').position(); 
    if (!pos.left <= 0 && !$('#nav').is(':animated')) { 
     $('#nav li:first').before($('#nav li:last')); 
     $("#nav").animate({"left": "+=300"}, "slow"); 
    } 
}); 

Answer 1

@例を参照してください？あなたは後であなたに問題が発生しますwidth 3回を宣言している数学の一部

http://api.jquery.com/outerWidth/

Answer 2

を解決する可能性が高いです。スコープ付きクリックイベントで変数を1つに減らし、名前を変更して、外側スコープで宣言されたwithを妨害しないようにすることができます。

var _width = - ($('#nav-viewport').width()); 

次に、この状態はとても奇妙です：

if (!pos.left <= 0 && !$('#nav').is(':animated')) 

代わりの!pos.left <= 0あなただけpos.left > 0を行うことができます。

Answer 3

あなたは同時に2つのことが起こっています。あなたは背中から前にアイテムを移動している、など、あなたはアニメーション化しています。前面から背面への移動を行うと、すべての画像が移動します。さらに、li要素のマージンが5pxである場合、300pxによってアニメーション化されます。これは合計1画像で160pxです。

var width = $('#nav').width(); 
$('#nav').width(width * 2 + 20); 

$("#nav").css({ 
    left: $('#nav').position().left - 160 + 'px' // Give a 1 image "buffer" for shifting left 
}); 

$(".nav-next").click(function() { 
    var pos = $('#nav').position(); 
    if (!$('#nav').is(':animated')) { 
     $('#nav li:first').insertAfter($('#nav li:last')); 
     $("#nav").css({ 
      left: pos.left + 160 + 'px' // Move because we reordered images 
     }).animate({ 
      "left": pos.left 
     }, "slow"); // Shift back 
    } 
}); 

$(".nav-prev").click(function() { 
    var pos = $('#nav').position(); 
    if (!$('#nav').is(':animated')) { 
     $('#nav li:last').insertBefore($('#nav li:first')); 
     $("#nav").css({ 
      left: pos.left - 160 + 'px' // Move because we reordered images 
     }).animate({ 
      "left": pos.left 
     }, "slow"); // Shift back 
    } 
}); 

デモ：http://jsfiddle.net/jtbowden/GFx7h/1/