如何在jQuery animate中使用变量动态调整left属性偏移值？

你写的 left: "+=contentWidth" 不生效的核心原因是：这里把 contentWidth 当成了字符串字面量的一部分，而非引用你定义的变量。jQuery 的 animate 方法解析这个字符串时，会认为它是无效的数值格式，自然无法执行正确的偏移动画。

正确写法示例 #

方式一：字符串拼接 #

通过字符串拼接将运算符 += 和变量值组合成有效的动画参数：

.on('click', '.btn', function () {
  var contentWidth = $(window).width() - $('.sidebar').width();
  $( ".content" ).animate({
      left: "+=" + contentWidth,
    }, 5000, function() {
      // moving content function
    }
  );
});

方式二：ES6 模板字符串（环境支持时可用） #

用模板字符串嵌入变量，写法更简洁直观：

.on('click', '.btn', function () {
  var contentWidth = $(window).width() - $('.sidebar').width();
  $( ".content" ).animate({
      left: `+=${contentWidth}`,
    }, 5000, function() {
      // moving content function
    }
  );
});

这样修改后，jQuery 就能正确识别偏移运算符和对应的数值，每次点击按钮时，都会基于内容当前的 left 位置，加上 contentWidth 计算出的偏移量执行动画。

内容的提问来源于stack exchange，提问作者Ivan Kharkivskyi