如何为jQuery的appendTo方法添加平滑移动过渡效果？

Got it! Adding a smooth transition animation to jQuery's appendTo() is totally achievable—here's a practical, step-by-step solution with working code:

The Core Idea #

By default, appendTo() moves elements instantly because it reparents the element in the DOM immediately. To add a smooth animation, we need to:

1. Capture the element's original position before moving it
2. Temporarily pin it in place with absolute positioning so it doesn't jump
3. Animate it to the target container's position
4. Finally, reparent it properly and reset its styling

Full Working Example #

First, some basic HTML and CSS to set up the scenario:

<!-- HTML -->
<div class="source-box">
  <div class="move-me">Click to move me smoothly!</div>
</div>
<div class="target-box">Target Container</div>

/* CSS */
.source-box, .target-box {
  width: 220px;
  height: 220px;
  border: 1px solid #ddd;
  margin: 30px;
  float: left;
  padding: 15px;
  background: #f9f9f9;
}
.move-me {
  background: #2563eb;
  color: white;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
}

Now the jQuery code that adds the smooth animation:

// jQuery
$('.move-me').on('click', function() {
  const $item = $(this);
  
  // 1. Save the element's initial position and dimensions
  const startPos = $item.offset();
  const itemWidth = $item.outerWidth();
  const itemHeight = $item.outerHeight();
  
  // 2. Get the target container's position
  const $target = $('.target-box');
  const targetPos = $target.offset();
  
  // 3. Temporarily position the element absolutely to keep it in place
  $item.css({
    position: 'absolute',
    left: startPos.left,
    top: startPos.top,
    width: itemWidth,
    height: itemHeight,
    margin: 0 // Override default margins to avoid position shifts
  });
  
  // 4. Calculate the final position (account for target's padding)
  const finalLeft = targetPos.left + parseInt($target.css('padding-left'));
  const finalTop = targetPos.top + parseInt($target.css('padding-top'));
  
  // 5. Animate the element to the target
  $item.animate({
    left: finalLeft,
    top: finalTop
  }, 600, 'easeInOutQuad', function() {
    // 6. After animation: reparent the element and reset styling
    $item.appendTo($target).css({
      position: '',
      left: '',
      top: '',
      width: '',
      height: '',
      margin: ''
    });
  });
});

Key Details to Note #

• Temporary Absolute Positioning: This is crucial—without it, appendTo() would yank the element into the target container instantly, breaking the animation flow.
• Padding Calculation: We add the target container's padding to the final position so the element lands neatly inside the container, not against its border.
• Style Reset: After the animation, we clear the inline styles we added so the element behaves normally in its new parent container.
• Animation Easing: The 'easeInOutQuad' option makes the animation feel smoother (requires jQuery UI, or you can omit it for the default linear easing).

Quick Optimizations #

• If you're moving multiple elements, wrap this logic in a loop to handle each one individually.
• For elements with custom margins, save the initial margin values and restore them in the final step.
• If you prefer CSS transitions over jQuery's animate(), you can calculate the position difference and apply a transform transition—just make sure to handle the DOM reparenting after the transition ends.

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