鼠标松开（mouseup）时元素向右偏移、宽高缩放动画失效的问题排查

我帮你排查出了两个问题的根源，并且整理了修复后的代码，咱们一步步来看：

问题1：缩放动画不生效的原因 #

你原本通过修改width和height实现缩放，但这里有两个坑：

• 你把img元素当成容器用background-image，但img的默认尺寸逻辑是基于src的，用CSS强行设置宽高后，jQuery的animate对这类元素的尺寸动画支持不稳定；
• 修改width/height会触发页面重排，动画容易卡顿甚至被浏览器忽略。

修复方案：改用transform: scale()实现缩放，同时用transform-origin: center确保缩放中心在元素本身，这样动画更流畅且不会触发重排。

问题2：松开鼠标后偏移的原因 #

你在mouseup事件里，动画还没执行完就直接修改了position和left/top——animate是异步的，这就导致元素还没回到参考位置，就被强制改成了relative定位，自然会偏移。

修复方案：把恢复定位和初始位置的代码放在animate的complete回调里，确保动画结束后再执行；同时每次执行动画前用stop()停止之前未完成的动画，避免冲突。

修复后的完整代码 #

HTML（修正img的src属性，移除无效的background-image用法）

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testing Testing 123</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="icon" type="image/x-icon" href="favicon.png">
<style>
/* CSS 代码放在这里，下面会写 */
</style>
</head>
<body>
<a id="backbutton" href="index.html" rel='noreferrer'> </a>
<div id="container1">
<div class="refs" id="doghuhref"> </div>
<img class="artwork" id="doghuh" src="dog/doghuh.jpg">
</div>
</body>
</html>

CSS（移除img的background样式，添加transform-origin）

:root {
  --con-size: 400px;
  --half-con-size: calc(var(--con-size) / 2);
}

body { 
  background: black url(spacebackground.gif) repeat top left; 
  background-size: 456px 351px; 
  color: white; 
  font-family: "vt323"; 
  width: 100vw; 
  height: 300vh; 
  margin: 0;
} 
#container1 { 
  position: absolute; 
  left: calc(50vw - calc(var(--con-size) / 2)); 
  top: 50px; 
  width: var(--con-size); 
  height: var(--con-size); 
  display: grid; 
  grid-template-columns: auto auto; 
  background: url(midshade.png) center repeat, url(topshade.png) left top no-repeat, url(bottomshade.png) left bottom no-repeat, #ababab; 
  background-size: var(--con-size) var(--con-size), var(--con-size) var(--con-size), var(--con-size) var(--con-size); 
} 
.artwork { 
  display: inline-block;
  position: relative; 
  left: 0; 
  top: 0; 
  filter: drop-shadow(6px 6px 6px black); 
  margin: 10px; 
  max-width: calc(var(--half-con-size) - 20px); 
  max-height: calc(var(--half-con-size) - 20px); 
  z-index: 1; 
  border: 0;
  transform-origin: center; /* 添加缩放原点 */
  transition: none; /* 禁用默认过渡，避免和jQuery动画冲突 */
} 
.refs { 
  position: relative; 
  background-color: pink; 
  margin: 10px; 
  width: 5px; 
  height: 5px; 
  z-index: 2; 
} 
#doghuh { 
  width: calc(var(--half-con-size) - 20px); 
  height: calc(var(--half-con-size) - 20px);
  grid-area: 1 / 1; 
} 
#doghuhref { 
  grid-area: 1 / 1; 
}

JS（重构动画逻辑，修复异步问题）

function animation(thing) { 
  var element = document.getElementById(thing); 
  var refname = thing + "ref";
  var ref = document.getElementById(refname); 
  var scale = 3; 

  // 获取元素初始的相对位置和尺寸
  const elementStyle = window.getComputedStyle(element);
  const originalWidth = elementStyle.getPropertyValue('width');
  const originalHeight = elementStyle.getPropertyValue('height');
  const originalLeft = elementStyle.getPropertyValue('left');
  const originalTop = elementStyle.getPropertyValue('top');

  $(element).mousedown(function(e) {
    e.preventDefault(); // 防止选中文字等干扰
    const $this = $(this);
    $this.stop(); // 停止之前未完成的动画

    // 获取参考元素的视口位置
    const rect = ref.getBoundingClientRect();
    const fixedStartLeft = rect.left + 'px';
    const fixedStartTop = rect.top + 'px';

    // 切换到fixed定位，先移动到参考位置
    $this.css({
      position: 'fixed',
      left: fixedStartLeft,
      top: fixedStartTop,
      width: originalWidth,
      height: originalHeight,
      margin: 0,
      zIndex: 9999 // 确保放大后在最上层
    });

    // 动画到屏幕中央并缩放
    $this.animate({
      left: '50%',
      top: '50%',
      marginLeft: `-${parseFloat(originalWidth)*scale/2}px`,
      marginTop: `-${parseFloat(originalHeight)*scale/2}px`
    }, {
      duration: 300,
      step: function(now, fx) {
        // 在动画过程中同步缩放
        if (fx.prop === 'left') {
          const progress = fx.pos; // 动画进度0-1
          $(this).css('transform', `scale(${1 + (scale-1)*progress})`);
        }
      }
    });
  });

  $(element).mouseup(function() {
    const $this = $(this);
    $this.stop(); // 停止之前未完成的动画

    // 获取参考元素当前的视口位置
    const rect = ref.getBoundingClientRect();
    const fixedEndLeft = rect.left + 'px';
    const fixedEndTop = rect.top + 'px';

    // 动画回到参考位置并缩小
    $this.animate({
      left: fixedEndLeft,
      top: fixedEndTop,
      marginLeft: 0,
      marginTop: 0
    }, {
      duration: 300,
      step: function(now, fx) {
        if (fx.prop === 'left') {
          const progress = 1 - fx.pos; // 反向进度
          $(this).css('transform', `scale(${1 + (scale-1)*progress})`);
        }
      },
      complete: function() {
        // 动画完成后恢复初始状态
        $(this).css({
          position: 'relative',
          left: originalLeft,
          top: originalTop,
          width: originalWidth,
          height: originalHeight,
          margin: '', // 恢复原margin
          transform: 'scale(1)',
          zIndex: 1
        });
      }
    });
  });
} 

// 确保DOM加载完成后执行
$(document).ready(function() {
  animation("doghuh"); 
});

关键改动说明 #

1. img元素修正：把background-image改成src属性，符合img元素的使用规范，让尺寸计算更稳定；
2. 缩放方式优化：用transform: scale()实现缩放，配合动画进度同步调整，避免重排；
3. 异步逻辑修复：将恢复定位的代码放在animate的complete回调中，确保动画结束后再切换定位方式；
4. 动画冲突处理：每次执行动画前调用stop()，停止之前未完成的动画，避免快速点击导致的混乱；
5. z-index调整：放大时设置高z-index，确保图片在最上层，不会被其他元素遮挡。

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