jQuery的动画div左/右如果条件

Question

我设法将一块代码在基于某些条件的容器div内动画一个div - 但是我的数学必须略微偏离，因为它的动画稍微偏左。看例子@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

尝试outterWidth？有可能解决一些数学

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

Answer 2

你声明width三倍，这将在以后导致你的问题。您可以将其缩小为范围内的单击事件中的一个变量，并将其重命名，以便不影响在外部范围内声明的with。

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

那么这个条件是如此怪异：

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

而不是!pos.left <= 0你可以做pos.left > 0。

Answer 3

你有两件事情在同一时间进行。您正在将项目从后面移动到前方等，并且您正在进行动画制作。当你进行前后移动时，所有图像都会移动。最重要的是，当您的li元素的边距为5px时，只有300px的动画效果，对于1幅图像总共为160px。 （320两，但我不认为你想要的）：

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/