jQuery animate css left using same variable moves 233 px right, but 210 px left
<p>I've created a plugin to create a calendar based on some data from a CMS, so that all I have to do is say $('#calendar-container').phCalendar();.  The javascript dynamically generates HTML and outputs it as I expect it to.</p>

<p>This is where it gets weird: I use ONE width variable to move left and right.  When I click the right arrow, the left value changes to -233 px like I expect.  When I click the left arrow, the left value only subtracts 210 px, even though it's using the SAME variable.</p>

<pre><code>function bindClickFunctionsToControllers(calendarNumber) {
            var slidingElement = $('.slidingElement.calendar-' + calendarNumber),
                width = slidingElement.parent().width();
            slidingElement.css('left', 0);
            $('.calendar-previous-' + calendarNumber).click(function() {
                if (slidingElement.css('left').split('px')[0] &lt;= 0) {
                    console.log(slidingElement);
                    console.log(width);
                    slidingElement.animate({left: '+=' + width + 'px'});
                }
            });
            $('.calendar-next-' + calendarNumber).click(function() {
                console.log(slidingElement);
                console.log(width);
                slidingElement.animate({left: '-=' + width + 'px'});
            });
        }
</code></pre>

<p>When the page loads (via chrome developer tools resources tab): </p>

<pre><code>&lt;div class="slidingElement calendar-2" style="width: 466px; left: 0px; "&gt;
</code></pre>

<p>From the console.logs in the calendar-next click function: </p>

<pre><code>&lt;div class=​"slidingElement calendar-2" style=​"width:​ 466px;​ left:​ 0px;​ "&gt;&lt;/div&gt;​
</code></pre>

<p>and 233</p>

<p>Clicked the right-arrow, and see this (via chrome developer tools resources tab): </p>

<pre><code>&lt;div class="slidingElement calendar-2" style="width: 466px; left: -233px; "&gt;
</code></pre>

<p>From the console.logs in the calendar-previous click function: </p>

<pre><code>&lt;div class=​"slidingElement calendar-2" style=​"width:​ 466px;​ left:​ -233px;​ "&gt;&lt;/div&gt;
</code></pre>

<p>and​
233</p>

<p>HOWEVER, if I inspect that element in the chrome developer tools toolbar, it states this for that slidable div:</p>

<pre><code>&lt;div class="slidingElement calendar-2" style="width: 466px; left: -23px; "&gt;
</code></pre>

<p>So the div moved 233 pixels on the first click, 210 pixels on the second click, even though it uses the SAME VARIABLE.  How is this possible?  I'm waiting for the animation to be done, so it's not like I'm interrupting it.</p>
