jQuery .position().left 和变量

Question

如何使用下面的 jQuery 使 slider 只向左滑动到“红色”幻灯片，向右滑动到“绿色”幻灯片？我觉得我缺少一些简单的东西，但我现在还没有看到。 moveLeft 函数似乎有效，但 moveRight 无效。

var slideWidth = $('#mySliderContainer').width();
var slideCountWidth = $('#mySlider').children().length;

var min = 0;
var max = -(slideCountWidth -1) * slideWidth;

function moveLeft() {
  $('#mySlider').animate({
    left: '+='+slideWidth
  }, 400);
  if($('#mySlider').position().left >= min) {
    $('#mySlider').animate({left: '-='+slideWidth});
  }
};

function moveRight() {
  $('#mySlider').animate({
    left: '-='+slideWidth
  }, 400);
  if($('#mySlider').position().left <= max) {
    $('#mySlider').animate({left: '+='+slideWidth});
  }
};

执行 jQuery 的链接位于此 jsFiddle 上.

理想情况下，如果您尝试越过最小和最大幻灯片，它应该反弹(到“红色”或“绿色”幻灯片)。这段代码显然有问题。

var max = -(slideCountWidth -1) * slideWidth;

Answer 1

你的 max是正确的，因为拖动工作正常。您的问题似乎是您正在执行 moveRight() 中的反弹脚本断开连接并与正常动画平行。这意味着当您检查 position().left <= max ，div 通常在幻灯片之间，比较不准确。

我会在您执行标准动画之前进行位置检查，然后在需要时将反弹链接回标准动画:

function moveLeft() {
    var isMin = $('#mySlider').position().left >= min;
    var a  = $('#mySlider').animate({
        left: '+='+slideWidth
    }, 400);

    if(isMin) {
        a.animate({left: '-='+slideWidth});
    }
};

function moveRight() {
    var isMax = $('#mySlider').position().left <= max + slideWidth;
    var a = $('#mySlider').animate({
        left: '-='+slideWidth
    }, 400);

    if(isMax) {
        a.animate({left: '+='+slideWidth});
    }
};

Updated Fiddle