jq控制一个盒子中心位置不变而长度和宽度增加2倍,增加2倍以后还原

在使用jQuery进行CSS样式操作时，如果你想要控制一个元素（比如一个div盒子）的中心位置保持不变，同时让其长度（width）和宽度（height）各自增加2倍，然后在完成变换后能够恢复到原始状态，可以这样做：

首先，假设这个盒子的初始CSS样式是：

.box {
  position: relative; /* 或者 absolute, fixed 等，保持定位 */
  left: 50%;  /* 初始中心位置 */
  top: 50%;  /* 或者 height: 50%, 宽度: 50% */
  transform-origin: center; /* 用于指定变换中心点，默认是元素中心 */
}

要动态改变尺寸并保持中心位置不变，你可以这样操作：

var box = $('.box'); // 获取需要操作的盒子

// 变形阶段
box.css({
  width: '200%',  // 盒子宽度增加2倍
  height: '200%',  // 盒子高度增加2倍
  transform: 'scale(2)',  // 缩放因子为2，相当于宽度和高度都翻倍
  WebkitTransform: 'scale(2)'  // 对于非标准浏览器的支持（如早期版本的Safari）
});

// 这里还可以添加动画效果，例如：
box.animate({width: 'auto', height: 'auto'}, 500); // 动画结束后恢复原始大小

// 恢复原状
setTimeout(function() {
  box.css('transform', 'scale(1)');
  box.css('WebkitTransform', 'scale(1)');  // 如果有需要的话
}, 500);  // 动画持续时间可以根据需求调整，这里是500毫秒

在这个例子中，`setTimeout`用于延迟一段时间后恢复原状，确保动画结束后返回初始状态。