переменная не будет обновляться с помощью jquery

Question

Я действительно застрял в этой точке. Я пытаюсь создать очень простой раздвижной div, который не может сдвинуть более 750 пикселей в определенном направлении. Я создал сценарий ниже, однако, хотя #teamInner DIV слайдов с каждым нажмите позиции уага всегда остается на 0px что означает если заявление я написал не буду работать. Кто-нибудь может понять, что я сделал неправильно? Вот код:

var position = ($("#teamInner").css("margin-left")); 
var maxRight = "-750px" 
var maxLeft = "0px" 

function left(){ 
    $("#teamInner").stop(true, true).animate({"margin-left":"+=250"},500,'easeOutQuart'); 
    $("#leftArrow").css("background-position", "50px"); 
    $("#rightArrow").css("background-position", "100px"); 
} 

function right(){ 
    $("#teamInner").stop(true, true).animate({"margin-left":"-=250"},500,'easeOutQuart'); 
    $("#rightArrow").css("background-position", "100px"); 
    $("#leftArrow").css("background-position", "50px"); 

} 


$("#leftArrow").click(function(){ 
if (position <= maxLeft && position >= maxRight) { 
    alert(position); 
    left(); 
} 
else{ 
$("#leftArrow").css("background-position", "150px"); 
} 
}); 

$("#rightArrow").click(function(){ 
if (position <= maxLeft && position >= maxRight) { 
    alert(position); 
    right(); 
} 
else{ 
$("#rightArrow").css("background-position", "0px"); 
} 

}); 

Answer 1

Вам необходимо вручную изменить значение position каждый раз, когда вы анимировать div.
Проще говоря, вы можете просто добавить

position = ($("#teamInner").css("margin-left")); 

в функциях left и right.