如何使用jQuery实现div位置移动、复位及尺寸动态调整

核心逻辑 #

• 页面初始化时先把所有待操作容器的初始位置、宽高存在元素自身的data缓存里，复位时直接读取，不用重复计算
• 触发新的选中操作时，先终止所有容器上未执行完的动画，避免快速多次触发导致动画堆叠错乱
• 先给当前处于激活居中状态的旧容器执行复位动画，还原到初始位置和尺寸
• 计算目标容器居中需要的偏移坐标、目标宽高，把位置和尺寸属性放在同一个animate方法里执行动画，保证移动和尺寸调整完全同步
• 注意所有动效容器必须设置position: absolute，否则top、left属性修改不会生效

实现代码 #

$(function() {
  // 缓存所有卡片初始状态
  $('.card').each(function() {
    const $el = $(this);
    $el.data('origin', {
      left: $el.position().left,
      top: $el.position().top,
      width: $el.width(),
      height: $el.height()
    })
  })

  // 绑定选中触发事件，示例用点击触发，可替换成自己的业务触发逻辑
  $('.card').on('click', function() {
    const $active = $('.card.active');
    const $target = $(this);
    // 点击当前已激活卡片直接返回
    if ($active.is($target)) return;

    // 清空所有在跑的动画
    $('.card').stop(true, false);

    // 旧激活卡片复位
    if ($active.length) {
      const origin = $active.data('origin');
      $active.animate({
        left: origin.left,
        top: origin.top,
        width: origin.width,
        height: origin.height
      }, 300).removeClass('active');
    }

    // 计算目标居中位置和尺寸，尺寸可按需求自定义
    const winW = $(window).width();
    const winH = $(window).height();
    const scrollTop = $(window).scrollTop();
    const targetW = 600;
    const targetH = 400;
    const targetLeft = (winW - targetW) / 2;
    const targetTop = (winH - targetH) / 2 + scrollTop;

    // 同步执行移动+尺寸变化动画
    $target.animate({
      left: targetLeft,
      top: targetTop,
      width: targetW,
      height: targetH
    }, 300).addClass('active');
  })
})

可调参数说明 #

• 动画时长：修改animate方法第二个数值参数即可，单位毫秒，数值越大动画越慢
• 居中后尺寸：修改targetW、targetH的值即可，支持按百分比、屏幕比例动态计算
• 动效曲线：如果需要加缓动效果，可以在animate的时长参数后面加缓动函数名，默认是swing

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