Question

Given this html code

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

<div id="div2">

</div>

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

Answer 1

Sure, though you’ll need to create a wrapper to do the animation…

Here’s a demo: 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();
});