是否可以使用jquery动画将文本从一个元素移动到另一个元素? [英] Is it possible to move the text from an element to another using jquery animation?

问题描述

给出此html代码

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

<div id="div2">

</div>

是否可以将div1中的某些文本"设置为div2的动画?我只想移动文本而不是整个元素.

Is it possible to animate "Some Text" from div1 to div2? I would like to move just the text rather than the whole element.

推荐答案

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

Sure, though you'll need to create a wrapper to do the animation...

这里是一个演示: 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();
});

---

这是按剧作的解释...

---

Here's the play by play explanation...

    // 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();
});

这篇关于是否可以使用jquery动画将文本从一个元素移动到另一个元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！