jquery - 是否可以使用 jquery 动画将文本从一个元素移动到另一个元素？

Question

给出这个 html 代码

<div id="div1">
    Some Text
</div>

<div id="div2">

</div>

是否可以将“某些文本”从 div1 动画到 div2？我想只移动文本而不是整个元素。

Answer 1

当然，尽管您需要创建一个包装器来执行动画...

这是一个演示: http://jsfiddle.net/TuuvF/1/

var div2 = $('#div2');

var wrapper = $('#div1')
    .contents()
    .wrap($('<div>').css('position','absolute'))
    .parent();

wrapper.animate(div2.offset(), 1000, function() {
    $(this).contents().appendTo(div2);
    wrapper.remove();
});

<小时/>

这是逐个游戏的解释...

    // reference div2
var div2 = $('#div2');

   // reference div1
var wrapper = $('#div1')

      // grab all of its contents (including text nodes)
    .contents()

      // wrap the contents in a generic wrapper div with absolute positioning
    .wrap($('<div>').css('position','absolute'))

      // traverse up to the wrapper div
    .parent();

  // animate the wrapper using the coordinates of div2 provided by .offset()
wrapper.animate(div2.offset(), 1000, function() {

        // in the animation callback, empty the contents into div2
    $(this).contents().appendTo(div2);

        // remove the now empty wrapper
    wrapper.remove();
});