求助：能否使用jQuery animate()动态调整背景图片尺寸？

当然可以实现啦！背景图的缩放本质是通过修改background-size属性来完成的，结合jQuery完全能搞定你要的「先移到最左侧→再移到角落并缩小至100px」的动画流程，我给你两种实用的方案参考：

方案一：CSS过渡+jQuery控制类名（推荐，性能更优） #

这种方式用浏览器原生的CSS过渡来处理动画，jQuery只负责控制动画的时序和状态切换，代码更简洁，动画性能也更好。

1. 先写基础CSS样式 #

给容器设置初始背景属性，同时定义过渡效果和不同动画状态的类：

.bg-container {
  width: 500px; /* 按需调整容器尺寸 */
  height: 500px;
  background-image: url('你的图片路径');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; /* 初始铺满容器 */
  transition: all 0.5s ease; /* 统一过渡动画时长和缓动效果 */
}

/* 状态1：背景图移到最左侧 */
.bg-position-left {
  background-position: left center;
}

/* 状态2：背景图移到左下角并缩小到100px */
.bg-corner-small {
  background-position: bottom left;
  background-size: 100px 100px;
}

2. jQuery控制动画流程 #

通过添加/移除类名来触发动画，同时用setTimeout控制两步动画的先后顺序：

$(document).ready(function() {
  const $bgContainer = $('.bg-container');
  
  // 第一步：触发背景图移到最左侧的动画
  $bgContainer.addClass('bg-position-left');
  
  // 等待第一步动画完成（时长和CSS过渡的0.5s对应）
  setTimeout(() => {
    // 第二步：触发移到角落+缩小的动画
    $bgContainer.addClass('bg-corner-small');
  }, 500);
});

方案二：纯jQuery animate实现（无需CSS过渡） #

如果不想依赖CSS过渡，也可以用jQuery的animate方法直接控制属性，但要注意：jQuery默认的animate不支持background-size这类非数值属性，需要通过step函数手动计算并修改属性值。

代码示例： #

$(document).ready(function() {
  const $bgContainer = $('.bg-container');
  const containerWidth = $bgContainer.width();
  const containerHeight = $bgContainer.height();
  // 计算初始背景图大小（因为初始是cover，取容器宽高中较大的那个）
  const initialSize = Math.max(containerWidth, containerHeight);
  const targetSize = 100; // 目标缩小尺寸

  // 第一步：移到最左侧
  $bgContainer.animate({
    backgroundPositionX: '0%'
  }, 500, function() {
    // 第一步完成后，执行第二步：移到左下角+缩小
    $bgContainer.animate({
      backgroundPositionX: '0%',
      backgroundPositionY: '100%'
    }, {
      duration: 500,
      // 每一步动画执行时更新background-size
      step: function(now, fx) {
        // fx.pos是当前动画的进度（0到1）
        const currentSize = initialSize - (initialSize - targetSize) * fx.pos;
        $(this).css('background-size', `${currentSize}px ${currentSize}px`);
      }
    });
  });
});

小提示 #

• 方案一的CSS过渡方式更推荐，因为原生动画性能更好，代码也更容易维护；
• 如果你的背景图初始不是cover，需要调整初始background-size的计算逻辑；
• 可以根据需求修改动画时长（0.5s）和缓动效果（ease）。

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