Невозможно установить влево с помощью CSS + jQuery

Question

Я пытаюсь реализовать карусель с JQuery на основе http://www.queness.com/post/923/create-a-simple-infinite-carousel-with-jquery. Это все работает нормально. Только когда я сажусь влево и вправо, я не возвращаюсь в свое первоначальное положение. По отладке я узнал, что левый набор не установлен в моем элементе ul. Код:

Javascript

var container = $('#calendarContainer ul'); 
var moveWidth = container[0].clientWidth/3; 
var currentIndent = container.position().left; 


if (event.type == "swipeleft") { 
    $('#calendarContainer ul').css('left', currentIndent - moveWidth); 
} 
if (event.type == "swiperight") { 
    $('#calendarContainer ul').css('left', currentIndent + moveWidth); 
} 

Html

<div id="calendarContainer" > 
    <ul> 
     <li id ="calendarDivLeft"> 
      <fieldset id="calendarWeekGridLeft" class="ui-grid-a"></fieldset> 
     </li> 
     <li id ="calendarDiv" > 
      <fieldset id="calendarWeekGrid" class="ui-grid-a"></fieldset> 
     </li> 
     <li id="calendarDivRight">    
      <fieldset id="calendarWeekGridRight" class="ui-grid-a"></fieldset> 
     </li> 
    </ul> 
</div> 

CSS

#calendarContainer ul 
{ 
    width : 300%; 
    list-style: none; 
    padding:0px; 
    left : 0%; 
    position:relative; 
    margin: 0px; 
    padding: 0px; 
} 

#calendarContainer ul li 
{ 
    width: 33.333%; 
    float:left; 
    position:relative; 
    margin: 0px; 
    padding: 0px; 
} 

Например, если ток left - 5, и я перемещаюсь налево на 594px, я ожидаю, что останется слева от -589. Вместо этого я получаю слева от 585! Если я двигаюсь вправо на 595, то левый становится 605 вместо 600.

Как это возможно?

Answer 1

Попробуйте это:

$('#calendarContainer ul').css('left', function(index, oldValue){ 
    var newValue = oldValue - moveWidth; 
    return newValue; 
}); 

css() функция может принимать функцию, аргументом являются индекс элемента в наборе и текущей стоимости имущества, которое было ссылочного. Это просто вопрос математики в этой функции и возврат нового значения.

Answer 2

CSS любит иметь единицы измерения. Попробуйте указать px

$('#calendarContainer ul').css('left', (currentIndent - moveWidth) + 'px');