Question

我已经创建了一个基于来自CMS的一些数据来创建日历的插件，所以我所要做的就是说$（'＃calendar-container'）。phCalendar（）;. javascript动态生成HTML并按照我的预期输出它。

这就是它变得奇怪的地方：我使用一个宽度变量来左右移动。当我单击右箭头时，左侧值会像我期望的那样变为-233像素。单击左箭头时，左侧值仅减去210 px，即使它使用的是SAME变量。

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] <= 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'});
            });
        }

加载页面时（通过chrome developer tools resources选项卡）：

<div class="slidingElement calendar-2" style="width: 466px; left: 0px; ">

从日历中的console.logs - 下一次单击功能：

<div class="slidingElement calendar-2" style="width: 466px; left: 0px; "></div>

和233

单击右箭头，然后看到此信息（通过chrome developer tools resources选项卡）：

<div class="slidingElement calendar-2" style="width: 466px; left: -233px; ">

从日历前一个点击功能中的console.logs：

<div class="slidingElement calendar-2" style="width: 466px; left: -233px; "></div>

和 233

但是，如果我在chrome开发人员工具工具栏中检查该元素，它会为可滑动的div说明这一点：

<div class="slidingElement calendar-2" style="width: 466px; left: -23px; ">

所以div在第一次点击时移动了233个像素，在第二次点击时移动了210个像素，即使它使用了相同的变量。这怎么可能？我正在等待动画完成，所以这并不像是在打扰它。

使用相同变量的jQuery animate css向右移动233 px，但是剩下210 px

0 个答案: