jQuery .position(). Left и variables

Question

Как это сделать, чтобы ползунок скользил только до «красного» слайда и справа до «зеленого» слайда с jQuery ниже? Я чувствую, что мне не хватает чего-то простого, но я пока не вижу его. Функция 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.

В идеале, если вы попытаетесь пройти мимо слайдов min и max, он должен отскочить назад (либо к «красному», либо «зеленому» слайду). Очевидно, я делаю что-то неправильно с этим кодом.

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

Answer 2

Вы правы, проблема ваше максимальное значение не учитывает поля, которые контейнер слайдера вносит в значение положения ползунка влево.

Изменить расчет макс это:

var max = (-(slideCountWidth -1) * slideWidth) + parseFloat($("#mySliderContainer").css("marginLeft")) ; 

http://jsfiddle.net/uhtxtnks/9/

Чтобы уточнить, вы можете добавить сигнал в вашей moveRight() для вывода значения $ ('# mySlider'). position(). левый после анимации. Обратите внимание, что когда вы дойдете до зеленого слайда, значение на самом деле составляет -629,5 (по крайней мере, на моей скрипке), а не -750, которое вы ожидаете. Это потому, что метод jQuery .position(). Left добавляет левое поле элемента #mySliderContainer к смещению, а это поле равно 120,5 (на моей скрипке). Таким образом, чтобы учесть это, вам просто нужно добавить этот контейнер в поле слева к максимальному расчёту.