如何实现jQuery slideToggle从图片中点而非左上角滑入滑出？

jQuery自带的slideToggle()确实只能沿着元素的上下边缘做滑动展开/收起，没法直接实现从中心点开始的滑入滑出效果。不过咱们可以用animate()方法手动控制尺寸和位置，完美达成你的需求，而且完全不需要zoom类动画~

完整代码示例 #

HTML结构（和你原来的一致）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button class="btn btn-default">My Button</button> <br><br><br> 
<img class="img-responsive" src="http://news.stanford.edu/news/2012/september/images/online_keyboard_news.jpg">

JavaScript逻辑

$(document).ready(function() {
  // 提前保存图片的初始尺寸和显示状态
  const $img = $('img');
  let originalWidth = $img.width();
  let originalHeight = $img.height();
  let isImgVisible = true;

  $('.btn').click(function() {
    $img.stop(); // 停止当前动画，避免连续点击导致的动画堆积

    if (isImgVisible) {
      // 从中心点收起：同时缩小宽高，调整margin让中心点固定
      $img.animate({
        width: 0,
        height: 0,
        marginTop: originalHeight / 2,
        marginLeft: originalWidth / 2
      }, 5000, function() {
        $img.hide(); // 动画结束后隐藏元素，避免占位置
      });
    } else {
      // 从中心点展开：先显示元素，再恢复原始尺寸和位置
      $img.show().animate({
        width: originalWidth,
        height: originalHeight,
        marginTop: 0,
        marginLeft: 0
      }, 5000);
    }
    // 切换显示状态标记
    isImgVisible = !isImgVisible;
  });

  // 可选：监听窗口大小变化，更新图片的原始尺寸（适配响应式场景）
  $(window).resize(function() {
    if (isImgVisible) {
      originalWidth = $img.width();
      originalHeight = $img.height();
    }
  });
});

关键逻辑说明 #

• 保存初始尺寸：提前获取图片的原始宽高，这样动画时能精准恢复到初始状态
• 中心点固定：收起时设置marginTop和marginLeft为原始尺寸的一半，让元素的中心点始终保持在原来的位置，实现从中心向四周收起的视觉效果
• 动画队列控制：用stop()方法终止当前正在运行的动画，防止用户连续点击按钮导致动画混乱
• 响应式适配：添加窗口resize监听，在图片显示状态下更新原始尺寸，避免窗口大小变化后动画错位

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