jQuery 按其宽度左右为响应式 div 设置动画答案

【问题标题】：jQuery animate a responsive div right and left by it's widthjQuery 按其宽度左右为响应式 div 设置动画
【发布时间】：2014-07-16 09:40:02
【问题描述】：

我在页面上制作了一个带有左右箭头的滑块。在桌面网站上查看时，宽度为 800 像素，在移动网站上为 230 像素。滑块有一个左右按钮，我希望能够根据它们的宽度左右移动幻灯片。即如果它是 800px 宽，我想将它向左和向右滑动 800px，当它只有 230px 宽时也是如此。

这是我的 jQuery 代码：

var calc_width = $('#calc_viewport').width();
$("#calc_next").click(function(){
if($("#calc_container").position().left == -8000 ) 
    {return;}
else { 
    $("#calc_container").animate({
        left: '-=calc_width'
    }, 1000, 'easeOutExpo');
}
});
$("#calc_prev").click(function(){
if($("#calc_container").position().left >= 0 ) 
    {return;}
else { 
    $("#calc_container").animate({
        left: '+=calc_width'
    }, 1000, 'easeOutExpo');
}
});

每个中的第一个 if 语句确保它在第一张和最后一张幻灯片处停止，因此用户不能继续滑动。目前这根本不滑动。谁能看到我哪里出错了？

【问题讨论】：

标签： jquery jquery-animate width

【解决方案1】：

这些都是错误的：

left: '+=calc_width'

他们应该是这样的：

left: '+=' + calc_width + 'px'

否则您尝试将元素的左侧设置为 '+=calc_width' 而不是 100px。

既然你是通过它的宽度为 calc_container 设置动画 - 为什么 calc_width 是从 calc_viewport 计算的？这应该是：

var calc_width = parseInt($('#calc_container').outerWidth());

【讨论】：